/* ========================================================================== EurekaGO Site Kit — v1 Derived from the HERMES site (hermes.eurekabike.it), which is the first production site built to the brand playbook. Tokens come from chapter 02 (Color System) and chapter 03 (Typography); nothing here is invented. Azure #00AEEF is both the master-brand operative colour and the BIKE vertical primary — see doc 02, and doc 01 where the "Azure Bike" swatch was aligned to the same token. ========================================================================== */ :root { --ink: #0A0A0A; --fuchsia: #E0007A; --azure: #00AEEF; /* Accento identitario della property. Sul master EurekaGO e' la fucsia: il cap. 02 riserva l'azzurro agli elementi che hanno un significato funzionale (link, CTA, stati interattivi), quindi tutto cio' che e' solo decorativo NON puo' essere azzurro qui. Sui verticali BIKE il primario coincide con l'azzurro e questo token vale --azure. */ --brand: #E0007A; --azure-dark: #0090C6; --cream: #F5F3EC; --white: #FFFFFF; --fog: #8A8780; --ink-60: rgba(10, 10, 10, .6); --ink-10: rgba(10, 10, 10, .08); --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --font: 'Archivo', system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--white); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } p a:not(.btn), li a:not(.btn) { color: var(--azure); } p a:not(.btn):hover, li a:not(.btn):hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } /* Keyboard focus must stay visible: the nav and cards are all anchors. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 12px 20px; z-index: 200; } .skip-link:focus { left: 0; } .container { max-width: 1160px; margin: 0 auto; padding: 0 32px; } .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--brand); flex-shrink: 0; } .section-title { font-size: clamp(28px, 4vw, 46px); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; } .section-title em { font-style: normal; color: var(--brand); } .section-sub { font-size: 17px; color: var(--fog); line-height: 1.6; margin-top: 14px; max-width: 580px; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: var(--r-sm); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .18s ease; border: 2px solid transparent; white-space: nowrap; } .btn-primary { background: var(--azure); color: var(--white); border-color: var(--azure); } .btn-primary:hover { background: var(--azure-dark); border-color: var(--azure-dark); } .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(26, 26, 46, .2); } .btn-ghost:hover { border-color: var(--ink); background: var(--ink-10); } /* --- TOP BAR ------------------------------------------------------------ */ .top-bar { background: var(--ink); padding: 0 32px; min-height: 44px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 101; } .top-bar-inner { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 1160px; padding: 6px 0; } .top-bar-text { font-size: 12px; color: rgba(255, 255, 255, .7); text-align: center; } .top-bar-text strong { color: var(--white); font-weight: 700; } /* --- EUREKABIKE LOCKUP -------------------------------------------------- Wordmark EUREKA (SVG) + "BIKE" set in Archivo 600, per the brand architecture rule: the endorser is present but subordinate. */ .eb-lockup { display: inline-flex; align-items: baseline; gap: 0; vertical-align: baseline; } .eb-lockup .eb-mark { display: inline-block; width: auto; vertical-align: baseline; } .eb-lockup .eb-bike { font-family: var(--font); font-weight: 600; letter-spacing: .02em; line-height: 1; color: inherit; } .eb-lockup.eb-xs .eb-mark { height: 8px; } .eb-lockup.eb-xs .eb-bike { font-size: 11px; } .eb-lockup.eb-sm .eb-mark { height: 12px; } .eb-lockup.eb-sm .eb-bike { font-size: 16px; } .eb-lockup.eb-md .eb-mark { height: 20px; } .eb-lockup.eb-md .eb-bike { font-size: 28px; } .eb-lockup.eb-lg .eb-mark { height: 30px; } .eb-lockup.eb-lg .eb-bike { font-size: 42px; } /* Wordmark ufficiale EurekaGO (cap. 01). I verticali usano il lockup EUREKA + parola-settore; il master ha un suo wordmark disegnato. */ .go-wordmark { height: 26px; width: auto; } .footer .go-wordmark { height: 20px; } /* --- NAV ---------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-10); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; } .nav-logo { display: flex; align-items: baseline; gap: 8px; } .nav-logo .wordmark { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); } .nav-logo .wordmark .h-accent { color: var(--azure); } .nav-logo .tagline { font-size: 10px; font-weight: 600; color: var(--fog); letter-spacing: .05em; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 600; color: var(--ink); opacity: .7; transition: opacity .15s; } .nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--azure); } .nav-actions { display: flex; align-items: center; gap: 10px; } /* --- LANGUAGE SWITCHER --------------------------------------------------- Shows the language you are ON, with its flag, and opens onto the others. Built on
so it works with no JavaScript and is announced as a disclosure by assistive tech; the small script in the layout only closes it on an outside click or Escape. Flags are rectangular SVGs from the estate's own asset host. English uses the United States flag, matching the admin panel, which serves us.svg. */ .langsel { position: relative; } .langsel > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1.5px solid var(--ink-10); border-radius: var(--r-sm); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--white); transition: border-color .15s; } .langsel > summary::-webkit-details-marker { display: none; } .langsel > summary:hover { border-color: rgba(10,10,10,.28); } .langsel[open] > summary { border-color: var(--azure); } .langsel-flag { width: 21px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(10,10,10,.10); flex-shrink: 0; } .langsel-code { letter-spacing: .04em; } .langsel-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--fog); transition: transform .15s; } .langsel[open] .langsel-caret { transform: rotate(180deg); } .langsel-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--ink-10); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(10,10,10,.12); } .langsel-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; } .langsel-menu a:hover { background: var(--cream); } .langsel-menu .langsel-code { font-size: 12px; font-weight: 800; color: var(--fog); letter-spacing: .06em; } .langsel-menu .langsel-name { font-weight: 600; } /* The nav links collapse below 900px but this must not: on a phone it is the only way to change language. */ @media (max-width: 540px) { .langsel > summary { padding: 6px 8px; font-size: 12px; } .langsel-menu { min-width: 168px; } .nav-actions .btn { display: none; } #formSubmit { width: 100%; justify-content: center; } } /* --- HERO --------------------------------------------------------------- */ .hero { padding: 0; background: var(--white); position: relative; display: flex; align-items: center; min-height: calc(100vh - 108px); overflow: hidden; } .hero::before { content: ''; position: absolute; top: -160px; right: -120px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(0, 174, 239, .05) 0%, transparent 65%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -100px; left: 30%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(224, 0, 122, .03) 0%, transparent 65%); pointer-events: none; } .hero-text { position: relative; z-index: 1; padding: 100px 0; text-align: center; } .hero-text .eyebrow { justify-content: center; } .hero h1 { font-size: clamp(38px, 5.5vw, 76px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; margin-bottom: 28px; max-width: 980px; margin-left: auto; margin-right: auto; } .hero h1 em { font-style: normal; color: var(--brand); } .hero-sub { font-size: 18px; color: var(--fog); line-height: 1.7; max-width: 620px; margin: 0 auto 40px; } .hero-sub strong { color: var(--ink); font-weight: 600; } .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .hero-proof { margin-top: 32px; font-size: 12px; color: var(--fog); display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .hero-proof span { display: inline-flex; align-items: center; gap: 6px; } .hero-proof span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--azure); } /* Inner pages get a shorter hero than the home page. */ .hero.hero-page { min-height: 0; } .hero.hero-page .hero-text { padding: 72px 0 56px; } .hero.hero-page h1 { font-size: clamp(32px, 4.6vw, 58px); margin-bottom: 20px; } /* --- PILLARS ------------------------------------------------------------ */ .pillars { padding: 100px 0; background: var(--cream); } .pillars-head { text-align: center; max-width: 700px; margin: 0 auto 64px; } .pillars-head .eyebrow { justify-content: center; } .pillars-head .section-sub { margin: 14px auto 0; } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pillar { background: var(--white); padding: 36px 28px; border-radius: var(--r-lg); border: 1px solid var(--ink-10); transition: all .2s ease; display: flex; flex-direction: column; } .pillar:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(10, 10, 10, .06); } .pillar-num { font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .18em; margin-bottom: 18px; } .pillar-title { font-size: 22px; font-weight: 900; letter-spacing: -.015em; margin-bottom: 14px; } .pillar-desc { font-size: 15px; color: var(--fog); line-height: 1.65; margin-bottom: 24px; flex-grow: 1; } .pillar-link { font-size: 13px; font-weight: 700; color: var(--azure); display: inline-flex; align-items: center; gap: 6px; } .pillar-link:hover { gap: 10px; transition: gap .15s; } /* --- MODULE GRID -------------------------------------------------------- Specific to the supersystem site: one card per platform module. */ .modules { padding: 100px 0; background: var(--white); } .modules-head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .modules-head .eyebrow { justify-content: center; } .modules-head .section-sub { margin: 14px auto 0; } .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .module { background: var(--white); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; transition: all .2s ease; } .module:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 10, 10, .06); border-color: rgba(0, 174, 239, .35); } .module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .module-name { font-size: 19px; font-weight: 900; letter-spacing: -.015em; } .module-name .h-accent { color: var(--azure); } /* Swatch of a vertical's own primary colour (playbook ch. 02). Purely decorative and hidden from assistive tech: the vertical is named in text right beside it, so the dot carries no information of its own. */ .vert-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: baseline; flex-shrink: 0; } .module-role { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); margin-bottom: 12px; } .module-desc { font-size: 14px; color: var(--fog); line-height: 1.65; flex-grow: 1; } .module-link { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--azure); display: inline-flex; align-items: center; gap: 6px; } .module-link:hover { gap: 10px; transition: gap .15s; } .tag { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; white-space: nowrap; } .tag-live { background: rgba(89, 152, 44, .12); color: #3F7519; } .tag-pipeline { background: rgba(0, 174, 239, .12); color: #057688; } .tag-standalone { background: rgba(224, 0, 122, .10); color: var(--fuchsia); } .tag-soon { background: var(--ink-10); color: var(--fog); } /* --- DARK "WHY" SECTION ------------------------------------------------- */ .why { padding: 100px 0; background: var(--ink); color: var(--white); } .why-head { text-align: center; max-width: 700px; margin: 0 auto 56px; } .why-head .eyebrow { color: var(--brand); justify-content: center; } .why-head .section-title { color: var(--white); } .why-head .section-sub { color: rgba(255, 255, 255, .6); margin: 14px auto 0; } .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; max-width: 920px; margin: 0 auto; } .why-item { display: flex; gap: 18px; align-items: flex-start; } .why-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 174, 239, .15); display: flex; align-items: center; justify-content: center; color: var(--azure); font-weight: 900; font-size: 14px; border: 1.5px solid rgba(0, 174, 239, .3); } .why-content h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; } .why-content p { font-size: 14px; color: rgba(255, 255, 255, .6); line-height: 1.65; } /* --- NUMBERS ------------------------------------------------------------ */ .numbers { padding: 72px 0; background: var(--cream); } .numbers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; } .number-value { font-size: clamp(36px, 5vw, 56px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--ink); } .number-label { font-size: 13px; color: var(--fog); margin-top: 10px; line-height: 1.5; } /* --- PROSE (inner content pages) ---------------------------------------- */ .prose { padding: 72px 0 88px; background: var(--white); } .prose-inner { max-width: 760px; margin: 0 auto; } .prose-inner h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; letter-spacing: -.02em; margin: 48px 0 16px; } .prose-inner h2:first-child { margin-top: 0; } .prose-inner h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 32px 0 12px; } .prose-inner p { font-size: 16px; color: var(--ink-60); line-height: 1.75; margin-bottom: 16px; } .prose-inner ul, .prose-inner ol { margin: 0 0 20px 22px; } .prose-inner li { font-size: 16px; color: var(--ink-60); line-height: 1.75; margin-bottom: 8px; } .prose-inner strong { color: var(--ink); font-weight: 600; } .callout { background: var(--cream); border-left: 3px solid var(--azure); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 22px 26px; margin: 28px 0; } .callout p:last-child { margin-bottom: 0; } /* --- FAQ ---------------------------------------------------------------- */ .faq-list { max-width: 820px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--ink-10); } .faq-item summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--azure); line-height: 1; } .faq-item[open] summary::after { content: '−'; } .faq-answer { padding: 0 44px 26px 0; } .faq-answer p { font-size: 15px; color: var(--fog); line-height: 1.7; margin-bottom: 12px; } .faq-answer p:last-child { margin-bottom: 0; } /* --- FORM --------------------------------------------------------------- */ /* Honeypot. Moved off-screen rather than display:none or hidden — some bots skip fields the browser reports as invisible, but happily fill a positioned one. Kept out of the accessibility tree and the tab order by the markup. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-wrap { max-width: 640px; margin: 0 auto; } .form-row { margin-bottom: 20px; } .form-row label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; } .form-row .req { color: var(--fuchsia); } .form-row input, .form-row textarea, .form-row select { width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink); padding: 13px 15px; border: 1.5px solid var(--ink-10); border-radius: var(--r-sm); background: var(--white); transition: border-color .15s; } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--azure); } .form-row textarea { min-height: 130px; resize: vertical; } .form-consent { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 24px; } .form-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--azure); } .form-consent label { font-size: 13px; color: var(--fog); line-height: 1.6; font-weight: 400; } .form-note { font-size: 13px; color: var(--fog); margin-top: 18px; line-height: 1.6; } .form-msg { padding: 16px 18px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 20px; display: none; } .form-msg.ok { display: block; background: rgba(89, 152, 44, .12); color: #3F7519; } .form-msg.err { display: block; background: rgba(221, 98, 78, .12); color: #C32F18; } /* --- CTA ---------------------------------------------------------------- */ .cta { padding: 100px 0; background: var(--white); text-align: center; } .cta-card { max-width: 760px; margin: 0 auto; padding: 56px 40px; background: var(--cream); border-radius: var(--r-lg); border: 1.5px solid var(--ink-10); } .cta h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.025em; margin-bottom: 18px; } .cta h2 em { font-style: normal; color: var(--brand); } .cta p { font-size: 16px; color: var(--fog); margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; } /* --- FOOTER ------------------------------------------------------------- */ .footer { background: var(--ink); color: rgba(255, 255, 255, .6); padding: 60px 0 32px; font-size: 13px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand { font-size: 24px; font-weight: 900; color: var(--white); margin-bottom: 12px; } .footer-tag { font-size: 13px; color: rgba(255, 255, 255, .5); max-width: 280px; line-height: 1.6; } .footer-col h5 { font-size: 11px; font-weight: 800; color: var(--white); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col li a { color: rgba(255, 255, 255, .6); transition: color .15s; } .footer-col li a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .4); } .footer-bottom a { color: rgba(255, 255, 255, .4); text-decoration: underline; } /* --- 404 ---------------------------------------------------------------- */ .err-page { min-height: calc(100vh - 108px); display: flex; align-items: center; text-align: center; } .err-code { font-size: clamp(72px, 14vw, 168px); font-weight: 900; letter-spacing: -.06em; line-height: 1; color: var(--brand); } /* --- NAV ON NARROW SCREENS ------------------------------------------------ Three items - logo, language switcher, call to action - do not fit a phone. The wordmark is an with max-width:100% and shrinks; the sector word beside it is text and does not, so the logo's content spills out of its box and lands under the switcher. Measured, the boxes never overlap: the content does. What gives way is the endorser. Playbook ch. 04 places it "bottom right on cover pages, footer on web, after the vertical mark in inline contexts" - the footer is its canonical web placement, and the footer still carries it. So on a product site the nav keeps the product name and drops "by EurekaBike". Where the lockup IS the site's own mark, as on home.eurekabike, it never drops - it scales. The sibling selector below draws exactly that line: a lockup preceded by a .wordmark is a signature, a lockup on its own is the subject. The language switcher is never hidden. Below 900px the nav links are already gone, so it is the only way left to change language. */ @media (max-width: 640px) { .nav-inner { gap: 10px; } /* Stop the logo shrinking below its own content. */ .nav-logo { flex-shrink: 0; min-width: 0; } .nav-logo .wordmark { font-size: 19px; } .nav-logo .eb-lockup .eb-mark { height: 13px; } .nav-logo .eb-lockup .eb-bike { font-size: 18px; } /* Endorser only: a lockup that follows a product wordmark. */ .nav-logo .wordmark ~ .tagline, .nav-logo .wordmark ~ .eb-lockup { display: none; } .nav-actions { gap: 8px; } .nav-actions .btn { padding: 10px 14px; font-size: 13px; } .langsel { flex-shrink: 0; } .langsel > summary { padding: 6px 8px; font-size: 12px; gap: 5px; } } /* --- MOBILE NAVIGATION -------------------------------------------------- Below 900px .nav-links is hidden. Until this existed, nothing took its place: the site could not be navigated on a phone at all. Same
disclosure as the language switcher, so it works with JavaScript disabled. Hidden on desktop, where the real links are already in the bar. */ .navmenu { display: none; position: relative; } .navmenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border-radius: 6px; border: 1.5px solid rgba(10,10,10,.12); background: var(--white); } .navmenu > summary::-webkit-details-marker { display: none; } .navmenu[open] > summary { border-color: var(--azure); } /* Three bars drawn from one element: the middle is the box, the outer two are its pseudo-elements. No icon font, no extra markup. */ .navmenu-bars, .navmenu-bars::before, .navmenu-bars::after { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; content: ''; } .navmenu-bars { position: relative; } .navmenu-bars::before { position: absolute; top: -6px; } .navmenu-bars::after { position: absolute; top: 6px; } .navmenu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 208px; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid rgba(10,10,10,.08); border-radius: 12px; box-shadow: 0 14px 36px rgba(10,10,10,.14); } .navmenu-list a { display: block; padding: 11px 12px; border-radius: 7px; font-size: 15px; font-weight: 600; color: var(--ink); } .navmenu-list li a:not(.btn):hover { background: var(--cream); color: var(--ink); } .navmenu-list li a.active:not(.btn) { color: var(--azure); } /* --- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 900px) { .nav-links { display: none; } .navmenu { display: inline-block; } .pillars-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .top-bar-text { font-size: 11px; } } @media (max-width: 540px) { .container { padding: 0 20px; } .footer-grid { grid-template-columns: 1fr; } .hero-text { padding: 64px 0; } .cta-card { padding: 40px 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- LOCKUP EUREKA ------------------------------------------------------- Mai "eureka" in minuscolo come testo: il lettering ufficiale (SVG) piu' la parola di settore in Archivo 600. Regola di marca, playbook cap. 01. */ .eu-lockup { display: inline-flex; align-items: baseline; gap: 0; vertical-align: baseline; } .eu-mark { display: inline-block; width: auto; height: .72em; vertical-align: baseline; } .top-bar .eu-mark { filter: invert(1); } .eu-lockup .eu-word { font-family: var(--font); font-weight: 600; font-size: 19px; letter-spacing: .02em; line-height: 1; color: inherit; } /* --- VERTICALI PREVISTI --------------------------------------------------- Architettura di marca, non prodotto: restano leggibili ma attenuati, e non si sollevano al passaggio del mouse. La differenza si vede prima di essere letta. L'opacita' si ferma a .45: sotto, il testo non passa il contrasto. */ .module-planned { opacity: .45; } .module-planned:hover { transform: none; box-shadow: none; border-color: var(--ink-10); } /* Il pulsante del verticale attivo chiude la card, staccato dal testo. */ .module-cta { align-self: flex-start; margin-top: 20px; } /* --- MODULI NON ANCORA PUBBLICATI ---------------------------------------- La card e' un