:root { --accent: #f49ca2; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2); } 25% { box-shadow: -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1); } 50% { box-shadow: -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2); } 75% { box-shadow: 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #ff2c56 }body.custom-background #c27-site-wrapper { background-color: white; } * {margin: 0 auto;} } body:not(.logged-in) .hide-logged-out { display: none !important; } .inbox-header-icon.messaging-center .icon-btn i { color: #ff2c56; vertical-align: middle; margin: 0 auto: } .block-type-tabs .tab-content * { font-size: 18px; font-weight: 400; color: #323232; font-family: 'Gill Sans', var(--e-global-typography-text-font-family); } .wpforms-form input[type=submit]:hover, .wpforms-form input[type=submit]:active, .wpforms-form button[type=submit]:hover, .wpforms-form button[type=submit]:active, .wpforms-form .wpforms-page-button:hover, .wpforms-form .wpforms-page-button:active { background-color: #ff2c56 !important; color: white !important; background: #ff2c56 !important; } .wpforms-form input[type=submit], .wpforms-form .wpforms-page-button { background-color: #F49CA3 !important; color: #323232 !important; background: #F49CA3 !important; } #linkfortext{ color: #f49ca2; } #linkfortext:hover, #linkfortext:active,{ color: #ff2c56; } .elementor-share-buttons--color-custom.elementor-share-buttons--skin-flat .elementor-share-btn, .elementor-share-buttons--color-custom.elementor-share-buttons--skin-gradient .elementor-share-btn { color: #fff; background-color: #F49CA3; } .elementor-share-buttons--color-custom.elementor-share-buttons--skin-flat .elementor-share-btn:hover, .elementor-share-buttons--color-custom.elementor-share-buttons--skin-gradient .elementor-share-btn:hover { background-color: #FF2C56; } .woocommerce-Tabs-panel h2:first-of-type { display: none; } .woocommerce-Tabs-panel h2 { font-size:1em; font-weight: 500; color: #323232; } .elementor-grid-0 .elementor-grid .elementor-grid-item { margin: 0px 10px } .elementor-woo-meta--view-stacked .product_meta .detail-container { font-size:15px; } .elementor-woo-meta--view-stacked .product_meta .detail-container span.detail-content a { color:#F49CA3 !important; } .elementor-woo-meta--view-stacked .product_meta .detail-container span.detail-content a:hover { color:#FF2C56 !important; }.elementor-woo-meta--view-stacked .product_meta .detail-container span.detail-content a:active { color:#FF2C56 !important; }.elementor-woo-meta--view-stacked .product_meta .detail-container span.detail-content a:focus { color:#FF2C56 !important; } .elementor-nav-menu--main { background-color: white; z-index: 1000; width: 100% !important; } .woocommerce-Tabs-panel-background{ background-color: white !important; } /* ========================================================= Sanna Styles — Global CSS Variables + Base UI Classes Paste into: WP Customizer → Additional CSS Save as: SS_Global_CSS.txt ========================================================= */ /* ---------- 1) ROOT VARIABLES ---------- */ :root{ /* Brand palette (from strategy doc) */ --ss-pink: #FF2C56; /* Passion Pink */ --ss-carnation: #F49CA3; --ss-creamsicle: #F4BEA3; --ss-chartreuse: #E2CF5D; --ss-sky: #85BFD6; --ss-seafoam: #BBEFE0; /* Neutrals (charcoal recommended for text vs pure black) */ --ss-white: #FFFFFF; --ss-ink: #1A1A1A; /* primary text */ --ss-ink-soft: #2A2A2A; /* headings on light backgrounds */ --ss-muted: #5A5A5A; /* secondary text */ --ss-muted-2: #7A7A7A; /* captions */ --ss-border: rgba(26,26,26,.12); --ss-border-strong: rgba(26,26,26,.18); /* Surfaces */ --ss-bg: var(--ss-white); --ss-surface: #FFFFFF; --ss-surface-2: #FAFAFB; --ss-surface-3: #F5F6F8; /* Semantic */ --ss-success: #18A957; --ss-warning: #E2B93B; --ss-danger: #D93C3C; /* Typography (from style guide) */ --ss-font-body: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --ss-font-heading: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif; --ss-font-accent: "Playfair Display", Georgia, "Times New Roman", serif; /* Type scale (fluid) */ --ss-fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem); --ss-fs-sm: clamp(0.92rem, 0.88rem + 0.18vw, 1.00rem); --ss-fs-md: clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem); --ss-fs-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.55rem); --ss-fs-xl: clamp(1.55rem, 1.30rem + 1.10vw, 2.15rem); --ss-fs-2xl: clamp(2.05rem, 1.65rem + 1.80vw, 3.05rem); /* Line-height + letter spacing */ --ss-lh-tight: 1.08; --ss-lh-snug: 1.20; --ss-lh-body: 1.55; --ss-ls-tight: -0.02em; --ss-ls-wide: 0.06em; /* Layout */ --ss-container: 1180px; --ss-section-pad-y: clamp(2.5rem, 2rem + 2.2vw, 5rem); --ss-section-pad-x: clamp(1.0rem, 0.8rem + 1.2vw, 2.0rem); --ss-gap-1: .5rem; --ss-gap-2: .75rem; --ss-gap-3: 1rem; --ss-gap-4: 1.5rem; --ss-gap-5: 2rem; --ss-gap-6: 3rem; /* Radii */ --ss-r-xs: 10px; --ss-r-sm: 14px; --ss-r-md: 18px; --ss-r-lg: 24px; --ss-r-xl: 32px; --ss-r-pill: 999px; /* Shadows */ --ss-shadow-sm: 0 8px 22px rgba(26,26,26,.08); --ss-shadow-md: 0 14px 40px rgba(26,26,26,.12); --ss-shadow-lg: 0 24px 70px rgba(26,26,26,.18); /* Focus ring + outlines */ --ss-focus-ring: 0 0 0 3px rgba(255,44,86,.22); --ss-focus-ring-strong: 0 0 0 4px rgba(255,44,86,.30); /* Motion */ --ss-ease: cubic-bezier(.2,.8,.2,1); --ss-dur-1: 120ms; --ss-dur-2: 180ms; --ss-dur-3: 260ms; /* Links */ --ss-link: var(--ss-ink); --ss-link-hover: var(--ss-pink); --ss-link-underline: rgba(255,44,86,.35); --ss-link-underline-hover: rgba(255,44,86,.70); /* Buttons */ --ss-btn-height: 48px; --ss-btn-pad-x: 18px; --ss-btn-font: var(--ss-font-body); --ss-btn-weight: 600; --ss-btn-radius: var(--ss-r-pill); --ss-btn-shadow: var(--ss-shadow-sm); --ss-btn-shadow-hover: var(--ss-shadow-md); --ss-btn-border: rgba(26,26,26,.16); --ss-btn-primary-bg: var(--ss-pink); --ss-btn-primary-fg: #FFFFFF; --ss-btn-outline-bg: transparent; --ss-btn-outline-fg: var(--ss-ink); --ss-btn-outline-border: rgba(26,26,26,.20); --ss-btn-soft-bg: rgba(255,44,86,.10); --ss-btn-soft-fg: var(--ss-ink); /* Cards */ --ss-card-bg: var(--ss-surface); --ss-card-bg-hover: var(--ss-surface-2); --ss-card-border: var(--ss-border); --ss-card-radius: var(--ss-r-lg); --ss-card-shadow: var(--ss-shadow-sm); --ss-card-shadow-hover: var(--ss-shadow-md); /* Pills / badges */ --ss-badge-bg: rgba(26,26,26,.06); --ss-badge-fg: var(--ss-ink); --ss-badge-border: rgba(26,26,26,.12); /* “Luxe” highlight */ --ss-luxe-grad: linear-gradient(135deg, rgba(255,44,86,.14), rgba(133,191,214,.16), rgba(187,239,224,.16)); --ss-luxe-border: rgba(255,44,86,.18); } /* ---------- 2) BASE TYPE (safe + minimal) ---------- */ body{ color: var(--ss-ink); font-family: var(--ss-font-body); line-height: var(--ss-lh-body); background: var(--ss-bg); } h1,h2,h3,h4{ font-family: var(--ss-font-heading); letter-spacing: var(--ss-ls-tight); color: var(--ss-ink-soft); } .ss-accent{ font-family: var(--ss-font-accent); font-style: italic; } /* ---------- 3) CONTAINER + SECTION UTILITIES ---------- */ .ss-container{ max-width: var(--ss-container); margin: 0 auto; padding-left: var(--ss-section-pad-x); padding-right: var(--ss-section-pad-x); } .ss-section{ padding: var(--ss-section-pad-y) 0; } .ss-stack{ display: flex; flex-direction: column; gap: var(--ss-gap-4); } .ss-row{ display: flex; flex-wrap: wrap; gap: var(--ss-gap-4); } .ss-center{ text-align:center; } .ss-muted{ color: var(--ss-muted); } .ss-muted-2{ color: var(--ss-muted-2); } /* ---------- 4) LINKS (normal / hover / active / focus) ---------- */ a{ color: var(--ss-link); text-decoration-color: var(--ss-link-underline); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color var(--ss-dur-2) var(--ss-ease), text-decoration-color var(--ss-dur-2) var(--ss-ease); } a:hover{ color: var(--ss-link-hover); text-decoration-color: var(--ss-link-underline-hover); } a:active{ opacity: .85; } a:focus-visible{ outline: none; box-shadow: var(--ss-focus-ring); border-radius: 6px; } /* ---------- 5) BUTTONS (classes you can apply in Elementor) ---------- */ .ss-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: var(--ss-btn-height); padding: 0 var(--ss-btn-pad-x); border-radius: var(--ss-btn-radius); font-family: var(--ss-btn-font); font-weight: var(--ss-btn-weight); letter-spacing: .02em; border: 1px solid var(--ss-btn-border); cursor: pointer; user-select: none; text-decoration: none !important; transition: transform var(--ss-dur-2) var(--ss-ease), box-shadow var(--ss-dur-2) var(--ss-ease), background var(--ss-dur-2) var(--ss-ease), border-color var(--ss-dur-2) var(--ss-ease), color var(--ss-dur-2) var(--ss-ease); } .ss-btn:focus-visible{ outline: none; box-shadow: var(--ss-focus-ring-strong); } .ss-btn:hover{ transform: translateY(-1px); box-shadow: var(--ss-btn-shadow-hover); } .ss-btn:active{ transform: translateY(0px); box-shadow: var(--ss-btn-shadow); opacity: .95; } /* Variants */ .ss-btn--primary{ background: var(--ss-btn-primary-bg); color: var(--ss-btn-primary-fg); border-color: rgba(255,44,86,.35); box-shadow: var(--ss-btn-shadow); } .ss-btn--outline{ background: var(--ss-btn-outline-bg); color: var(--ss-btn-outline-fg); border-color: var(--ss-btn-outline-border); box-shadow: none; } .ss-btn--soft{ background: var(--ss-btn-soft-bg); color: var(--ss-btn-soft-fg); border-color: rgba(255,44,86,.16); box-shadow: none; } .ss-btn--ghost{ background: transparent; color: var(--ss-ink); border-color: transparent; box-shadow: none; } /* ---------- 6) CARDS + CONTAINERS ---------- */ .ss-card{ background: var(--ss-card-bg); border: 1px solid var(--ss-card-border); border-radius: var(--ss-card-radius); box-shadow: var(--ss-card-shadow); padding: clamp(1.1rem, 1rem + .6vw, 1.6rem); transition: transform var(--ss-dur-2) var(--ss-ease), box-shadow var(--ss-dur-2) var(--ss-ease), background var(--ss-dur-2) var(--ss-ease); } .ss-card:hover{ background: var(--ss-card-bg-hover); box-shadow: var(--ss-card-shadow-hover); transform: translateY(-2px); } .ss-panel{ background: var(--ss-surface-2); border: 1px solid var(--ss-border); border-radius: var(--ss-r-xl); padding: clamp(1.25rem, 1.05rem + 1vw, 2rem); } .ss-luxe{ background: var(--ss-luxe-grad); border: 1px solid var(--ss-luxe-border); border-radius: var(--ss-r-xl); } /* ---------- 7) BADGES / CHIPS ---------- */ .ss-badge{ display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: var(--ss-r-pill); background: var(--ss-badge-bg); color: var(--ss-badge-fg); border: 1px solid var(--ss-badge-border); font-size: var(--ss-fs-xs); letter-spacing: .03em; } /* ---------- 8) FORMS (optional utility) ---------- */ .ss-input{ width: 100%; min-height: 46px; padding: .65rem .9rem; border-radius: var(--ss-r-md); border: 1px solid var(--ss-border-strong); background: var(--ss-white); color: var(--ss-ink); transition: box-shadow var(--ss-dur-2) var(--ss-ease), border-color var(--ss-dur-2) var(--ss-ease); } .ss-input:focus{ outline: none; border-color: rgba(255,44,86,.35); box-shadow: var(--ss-focus-ring); } /* ---------- 9) ACCESSIBILITY: REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; scroll-behavior: auto !important; } .ss-btn:hover, .ss-card:hover{ transform: none !important; } }