/* Theme Name: EMG Swiss Dark Text Domain: emg-swiss-dark Version: 2.0.1 Requires at least: 6.5 Requires PHP: 7.4 Description: Sleek dark theme with a desktop-first hero; mobile overrides live directly after each desktop rule. Author: EMG License: GPL-2.0-or-later */ /* =============================== TOKENS / BASE =============================== */ :root{ --emg-radius-sm: 10px; --emg-radius-md: 14px; --emg-radius-lg: 18px; --emg-radius-xl: 22px; --emg-radius-2xl: 26px; --emg-shadow-sm: 0 4px 14px rgba(0,0,0,.28); --emg-shadow-md: 0 10px 26px rgba(0,0,0,.36); --emg-shadow-lg: 0 16px 40px rgba(0,0,0,.46); --emg-ease: cubic-bezier(.22,.61,.21,1); --emg-fast: .14s; --emg-mid: .22s; --emg-space-1: clamp(6px, .5vw, 10px); --emg-space-2: clamp(10px, .9vw, 14px); --emg-space-3: clamp(14px, 1.4vw, 22px); --emg-space-4: clamp(18px, 2.0vw, 28px); --emg-space-5: clamp(24px, 2.8vw, 40px); --emg-space-6: clamp(32px, 3.8vw, 56px); --emg-w-lg: 1140px; --bg: var(--wp--preset--color--bg, #0b0b0b); --ink: var(--wp--preset--color--ink, #f7f7f7); --muted: var(--wp--preset--color--muted, #A9AFBA); --hair: var(--wp--preset--color--hair, rgba(255,255,255,.12)); --hair-strong: color-mix(in oklab, var(--hair) 85%, white 15%); --rvp: var(--wp--preset--gradient--rvp, linear-gradient(90deg,#DC2626,#EF4444,#EC4899,#8B5CF6,#6D28D9)); } /* ===== Global, synchronized gradient driver ===== */ @property --rvp-pan { syntax: ""; initial-value: 0%; inherits: true; } @property --rvp-sheen { syntax: ""; initial-value: -40%; inherits: true; } :root{ --rvp-pan: 0%; --rvp-sheen: -40%; --rvp-pan-duration: 12s; /* desktop defaults */ --rvp-sheen-duration: 3.5s; } /* Run the sync loop on so all descendants share the same phase */ body{ animation: rvpPanSync var(--rvp-pan-duration) linear infinite, rvpSheenSync var(--rvp-sheen-duration) var(--emg-ease) infinite; } @keyframes rvpPanSync{ 0% { --rvp-pan: 0%; } 50% { --rvp-pan: 100%; } 100% { --rvp-pan: 0%; } } @keyframes rvpSheenSync{ 0% { --rvp-sheen: -40%; } 50% { --rvp-sheen: 140%; } 100% { --rvp-sheen: -40%; } } /* Mobile: slow the global loop slightly (placed right after desktop) */ @media (max-width:780px){ :root{ --rvp-pan-duration: 14s; --rvp-sheen-duration: 4.2s; } } /* Respect motion preferences globally */ @media (prefers-reduced-motion: reduce){ body.rvp-sync{ animation: none !important; } } /* Reusable live gradient text (PAN + SHEEN), synced */ .gradient-live{ background-image: var(--rvp), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); background-size: 280% 100%, 200% 100%; background-position: var(--rvp-pan) 50%, var(--rvp-sheen) 50%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; } html, body{ margin:0; background: var(--bg); color: var(--ink); font-family: var(--wp--preset--font-family--inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings >= 700 */ h1,h2,h3,h4,h5,h6{ margin:0 0 var(--emg-space-3); font-weight: 800; font-variation-settings: "wght" 780; letter-spacing:-0.01em; line-height:1.08; } h1{ font-size: clamp(44.8px, 6.4vw, 108.8px); } h2{ font-size: clamp(32px, 4.4vw, 51.2px); } h3{ font-size: clamp(25.6px, 3.2vw, 35.2px); } .eyebrow,.kicker{ text-transform: uppercase; letter-spacing:.14em; font-size: clamp(11.52px, .9vw, 13.76px); font-weight:800; color: var(--muted); } .lede{ font-size: clamp(16.8px, 1.6vw, 21.6px); line-height:1.62; color: color-mix(in oklab, var(--ink) 93%, white 7%); margin:0; } /* =============================== Button Group To The Left =============================== */ .btn-group-responsive { display: flex; flex-wrap: wrap; justify-content: flex-start; /* default: left on desktop */ gap: 1rem; /* space between buttons */ } /* Mobile override */ @media (max-width: 768px) { .btn-group-responsive { justify-content: center; /* center on mobile */ } } /* =============================== HERO (desktop default + mobile overrides) Use with: Cover block class "emg-hero" =============================== */ /* Eyebrow (base / desktop) */ .eyebrow-hero { text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-size: clamp(18px, 0.9vw, 20px); line-height: 1.4; margin: 0 0 0.5em 0; /* breathe under eyebrow before hero heading */ text-align: left; /* left aligns better for widescreen hero layouts */ max-width: 72ch } /* Eyebrow – mobile */ @media (max-width: 680px) { .eyebrow-hero { font-size: 18px; font-weight: 600; text-align: left; /* centered for narrow viewports */ letter-spacing: 1px; /* tighter so it doesn’t look too spaced */ max-width: 28ch; } } /* Eyebrow – very large screens */ @media (min-width: 1400px) { .eyebrow-hero { font-size: 26px; /* cap size for readability */ letter-spacing: 0.18em; } } .h-hero { margin: 0; max-width: 16ch; font-size: clamp(112px, 6.2vw, 120px); color: var(--ink); text-wrap: balance; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin-left: 0; margin-right: auto; text-align: left; font-weight: 700; /* set an explicit default */ font-variation-settings: "wght" 700; /* if using a variable font */ font-synthesis: none; /* prevent fake bold/italic */ } @media (min-width: 980px) { .h-hero { letter-spacing: -0.024em; line-height: .8; } } @media (min-width: 1400px) { .h-hero { font-size: 142px; letter-spacing: -0.026em; line-height: .8; } } @media (max-width: 780px) { .h-hero { line-height: .8; max-width: 100%; text-align: left; font-size: 104px; /* ← fixed */ font-weight: 900; /* real 900 must be loaded */ font-variation-settings: "wght" 900; /* pin axis on iOS */ } } /* Headline – aurora mask */ .h-hero.is-aurora-mask { position: relative; color: transparent; background: radial-gradient(120% 140% at 10% 50%, rgba(255,255,255,.95), rgba(255,255,255,.2) 40%, transparent 70%), linear-gradient(90deg, #fefefe 0%, #dfe7ff 50%, #ffffff 100%); background-clip: text; -webkit-background-clip: text; animation: aurora-pan 12s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,255,255,.14)); } @keyframes aurora-pan { 0%, 100% { background-position: 0% 50%, 0% 50%; } 50% { background-position: 100% 50%, 100% 50%; } } /* Headline – safety: if balance isn’t supported, fall back */ @supports not (text-wrap: balance) { .h-hero { overflow-wrap: anywhere; } } /* =============================== SUBLEDE =============================== */ .sublede-hero { margin: 0.6em 0 0; /* space above if under hero, tweak as needed */ opacity: .95; color: #D0D0D0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; margin-left: auto; margin-right: auto; max-width: 52ch; /* keeps text readable on wide screens */ text-wrap: balance; /* balances line breaks (if supported) */ text-align: center; /* match headline alignment */ -webkit-font-smoothing: antialiased; } /* Sublede – very large screens */ @media (min-width: 1400px) { .sublede-hero { font-size: 22px; line-height: 1.6; text-align: center; max-width: 58ch; /* slightly narrower for big monitors */ margin-left: auto; margin-right: auto; text-align: center; } } /* Sublede – mobile */ @media (max-width: 780px) { .sublede-hero { font-size: clamp(14px, 4.2vw, 15.6px); line-height: 1.5; max-width: 32ch; /* don’t constrain on small screens */ text-align: center; margin-left: auto; margin-right: auto; font-size: 16px; } } /* Sublede – safety: without balance */ @supports not (text-wrap: balance) { .sublede-hero { overflow-wrap: anywhere; } } /* =============================== BUTTONS (block styles emg-pill / emg-ghost) =============================== */ /* Pill */ .is-style-emg-pill .wp-element-button, .is-style-emg-pill .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-weight: 600; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 19.2px); padding: 0.95em 1.45em; border-radius: 999px; color: #0b0b0b; /* synced live gradient + sheen */ background-image: var(--rvp), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%); background-size: 280% 100%, 200% 100%; background-position: var(--rvp-pan) 50%, var(--rvp-sheen) 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--emg-shadow-md); transition: transform var(--emg-mid) var(--emg-ease), box-shadow var(--emg-mid) var(--emg-ease); } .is-style-emg-pill .wp-element-button:hover, .is-style-emg-pill .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 18px 48px rgba(0,0,0,.5); } /* Pill – mobile sizing */ @media (max-width: 780px) { .is-style-emg-pill .wp-element-button, .is-style-emg-pill .wp-block-button__link { font-size: clamp(12.2px, 3.8vw, 14.8px); padding: .9em 1.25em; } } /* Pill – focus ring (palette harmonized) */ .wp-block-button.is-style-emg-pill.is-live .wp-element-button:focus-visible, .wp-block-button.is-style-emg-pill .wp-element-button.btn-live:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in oklab, #7C3AED 62%, #EC4899 38%), 0 18px 48px rgba(0,0,0,.5); } /* Ghost */ .is-style-emg-ghost .wp-element-button, .is-style-emg-ghost .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-weight: 600; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 19.2px); padding: 0.95em 1.25em; border-radius: 999px; color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--hair); box-shadow: inset 0 1px rgba(255,255,255,.06); transition: border-color var(--emg-mid) var(--emg-ease), background var(--emg-mid) var(--emg-ease); } .is-style-emg-ghost .wp-element-button:hover, .is-style-emg-ghost .wp-block-button__link:hover { border-color: var(--hair-strong); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); } /* Ghost – mobile sizing */ @media (max-width: 780px) { .is-style-emg-ghost .wp-element-button, .is-style-emg-ghost .wp-block-button__link { font-size: clamp(12.2px, 3.8vw, 14.8px); padding: .9em 1.1em; } } /* Shared focus ring */ :where(a, button, .wp-block-button__link):focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in oklab, #7C3AED 62%, #EC4899 38%); border-radius: inherit; transition: box-shadow var(--emg-fast) var(--emg-ease); } /* =============================== LIGHT UTILITIES =============================== */ .container-lg { max-width: var(--emg-w-lg); margin-inline: auto; padding-inline: clamp(20px, 3.5vw, 28px); } .center { text-align: center; } .left { text-align: left; } .hr-hair { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair), transparent); } /* A11y motion preference */ @media (prefers-reduced-motion: reduce) { .is-style-emg-pill .wp-element-button, .is-style-emg-ghost .wp-element-button { transition-duration: .01ms !important; } } /* Editor parity */ .editor-styles-wrapper .eyebrow { font-size: clamp(11.52px, .9vw, 13.76px); } .editor-styles-wrapper .hr-hair { height: 1px; } /* =============================== BUTTON ICON VARIANTS (desktop first) Use on the Button block wrapper: .wp-block-button.btn-icon-phone → left phone icon (Book a Call) .wp-block-button.btn-icon-left → right left-arrow icon (Learn More) =============================== */ /* Base: keep sizing from your pill/ghost styles; this only adds icons */ .wp-block-button.btn-icon-phone .wp-element-button, .wp-block-button.btn-icon-left .wp-element-button, .wp-block-button.btn-icon-phone .wp-block-button__link, .wp-block-button.btn-icon-left .wp-block-button__link{ position:relative; /* iOS pseudo reliability */ display:inline-flex; align-items:center; gap:.55em; line-height:1; white-space:nowrap; --icon-size: 1.05em; /* scales with font-size */ } /* BOOK A CALL — phone icon on the LEFT */ .wp-block-button.btn-icon-phone .wp-element-button::after, .wp-block-button.btn-icon-phone .wp-block-button__link::after{ content:""; display:inline-block; width:var(--icon-size); height:var(--icon-size); flex:0 0 auto; background-color: currentColor; -webkit-mask:url('/wp-content/themes/emg-tmplt/assets/icons/phone.svg') no-repeat center/contain; mask:url('/wp-content/themes/emg-tmplt/assets/icons/phone.svg') no-repeat center/contain; } /* LEARN MORE — left arrow on the RIGHT */ .wp-block-button.btn-icon-left .wp-element-button{ gap:.6em; } .wp-block-button.btn-icon-left .wp-element-button::after, .wp-block-button.btn-icon-left .wp-block-button__link::after{ content:""; display:inline-block; width:var(--icon-size); height:var(--icon-size); flex:0 0 auto; background-color: currentColor; -webkit-mask:url('/wp-content/themes/emg-tmplt/assets/icons/arrow-left.svg') no-repeat center/contain; mask:url('/wp-content/themes/emg-tmplt/assets/icons/arrow-left.svg') no-repeat center/contain; } /* Micro-hover nudges (respects reduced motion) */ @media (prefers-reduced-motion:no-preference){ .wp-block-button.btn-icon-left .wp-element-button:hover::after{ transform: translate(-.08em,0); transition: transform var(--emg-fast) var(--emg-ease); } .wp-block-button.btn-icon-phone .wp-element-button:hover::before{ transform: translate(.02em,-.02em); transition: transform var(--emg-fast) var(--emg-ease); } } /* Mobile override (placed immediately after desktop): keep icons proportional */ @media (max-width:780px){ .wp-block-button.btn-icon-phone .wp-element-button, .wp-block-button.btn-icon-left .wp-element-button, .wp-block-button.btn-icon-phone .wp-block-button__link, .wp-block-button.btn-icon-left .wp-block-button__link{ --icon-size: 1em; /* slightly tighter on mobile; inherits font-size from pill/ghost overrides */ } } /* Fallback: browsers without mask support */ @supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){ .wp-block-button.btn-icon-phone .wp-element-button::before, .wp-block-button.btn-icon-phone .wp-block-button__link::before{ background-color: transparent; background-image: url('/wp-content/themes/emg-tmplt/assets/icons/phone.svg'); background-repeat:no-repeat; background-position:center; background-size:contain; } .wp-block-button.btn-icon-left .wp-element-button::after, .wp-block-button.btn-icon-left .wp-block-button__link::after{ background-color: transparent; background-image: url('/wp-content/themes/emg-tmplt/assets/icons/arrow-left.svg'); background-repeat:no-repeat; background-position:center; background-size:contain; } } /* =============================== COVER ANIMATIONS Add class to your Cover block: .cover-anim-float → slow up/down float .cover-anim-pan → subtle background pan .cover-anim-zoom → breathing zoom in/out =============================== */ /* Float (whole cover moves slightly up and down) */ .cover-anim-float{ animation: emgCoverFloat 12s ease-in-out infinite; } @keyframes emgCoverFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2%); } } /* Background pan (moves bg image slowly left-right) */ .cover-anim-pan .wp-block-cover__image-background{ animation: emgCoverPan 10s linear infinite; } @keyframes emgCoverPan{ 0%{ transform: scale(1.20) translateX(0); } 50%{ transform: scale(1.20) translateX(-5%); } 100%{ transform: scale(1.20) translateX(0); } } /* Zoom pulse (background image slowly zooms in/out) */ .cover-anim-zoom .wp-block-cover__image-background{ animation: emgCoverZoom 18s ease-in-out infinite; } @keyframes emgCoverZoom{ 0%,100%{ transform: scale(1.02); } 50%{ transform: scale(1.08); } } /* Motion respect (turn off for reduced motion users) */ @media (prefers-reduced-motion: reduce){ .cover-anim-float, .cover-anim-pan .wp-block-cover__image-background, .cover-anim-zoom .wp-block-cover__image-background{ animation: none !important; } } /* Responsive viewport height for WP Cover block */ .cover-vh-responsive { min-height: 75vh; /* default for desktop/tablet */ } @media (max-width: 768px) { .cover-vh-responsive { min-height: 85vh; /* taller on mobile */ } } /* Section headline (desktop-first) */ .section-headline { margin: 0; /* Desktop / tablet default */ font-size: clamp(52px, 4.6vw, 72px); font-weight: 700; color: var(--ink); text-wrap: balance; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-align: left; letter-spacing: -0.018em; line-height: 1.1; } /* Large screens – slight tighten */ @media (min-width: 1400px) { .section-headline { font-size: 48px; letter-spacing: -0.02em; } } /* Mobile – bump up for visual hierarchy */ @media (max-width: 780px) { .section-headline { font-size: 52px; line-height: 1; font-weight: 800; text-align: left; max-width: 48ch; font-variation-settings: "wght" 800; font-synthesis: none; } } /*================================== Section Eyebrow */ .section-eyebrow { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin: 0 0 0.75em 0; text-align: left; /* desktop default */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Mobile – center align for balance */ @media (max-width: 780px) { .section-eyebrow { text-align: left; } }