/* ============================================================================= styles.css — Mauro Sicard The single hand-authored stylesheet for the native (de-Webflowed) site. ----------------------------------------------------------------------------- WHERE THIS FITS IN THE CASCADE (see includes/page-settings.php → render_head): 1. normalize.css reset 2. webflow.css Webflow base component classes (.w-*) 3. maurosicard.webflow.css exported design system + the --neutral--* palette this file aliases below 4. styles.css ← THIS FILE hand-written layer: replaces the Webflow runtime (IX2 reveals, nav JS) with native CSS, restyles the header, and owns every bespoke interaction. Always loaded LAST so it can override the exported CSS. COMPANION FILES • assets/js/runtime.js behaviour (reveal stagger, dropdowns, mobile menu, directional sticky header). Class hooks below are toggled there: .is-visible .reveal-done .is-open .menu-open .header-hidden, and the --reveal-delay custom property. • includes/config.php ASSET_VER cache-busts this file (?v=…). Bump it whenever you edit this file or runtime.js. NAMING CONVENTIONS • .site-* desktop header (bar, logo, nav, dropdowns, CTA, hamburger) • .mobile-* mobile slide-in menu and its language switch • state classes are adjectives toggled by JS: .is-open, .is-visible, .menu-open (set on ), .header-hidden, .reveal-done • colours are referenced through the semantic tokens in §1 — never hardcode a hex for text/borders/surfaces; add or reuse a token instead. EXTENDING FOR NEW PAGES • Reveal on scroll: add `data-animation-reveal` (+ optional `data-animation-delay=""`) to any element — see §2. • Reuse the tokens in §1 for colour, motion, radius and elevation so new sections stay visually consistent. Add page-specific blocks at the end. TABLE OF CONTENTS 1. Design tokens 2. Motion primitive — scroll reveal 3. Header — directional sticky behaviour 4. Header — bar & logo 5. Header — primary navigation (links + underline) 6. Header — dropdown menus 7. Header — call-to-action button 8. Header — hamburger (mobile trigger) 9. Mobile — circular-reveal menu 10. Content — hero interactions & spacing 11. Content — link & card hover micro-interactions 12. Global — neutralise legacy accent (purple) hovers 13. Component — book cover hover ========================================================================== */ /* ============================================================================= 1. DESIGN TOKENS Semantic aliases over the exported Webflow palette (--neutral--* live in maurosicard.webflow.css). Each alias keeps a literal fallback that matches the palette exactly, so the file still renders correctly in isolation. ========================================================================== */ :root { /* Ink (text + dark fills), light → dark */ --c-ink: var(--neutral--800, #222); /* primary text, dark fills, X icon */ --c-ink-soft: var(--neutral--700, #666); /* nav links, dropdown item text */ --c-ink-faint: var(--neutral--600, #868686); /* tertiary text; dark→light on hover */ /* Lines, borders & surfaces, light → dark */ --c-surface: var(--neutral--100, #fff); /* white surfaces (bar, panels, burger) */ --c-surface-2: var(--neutral--200, #f9f9f9); /* subtle hover fill, icon tiles */ --c-line: var(--neutral--300, #efefef); /* hairlines, dividers, panel borders */ --c-fill: var(--neutral--300, #efefef); /* grey control fill (CTA at rest) */ --c-border: var(--neutral--400, #e7e7e7); /* default control borders */ --c-edge: var(--neutral--500, #c5c5c5); /* faint icons (mobile arrows at rest) */ --c-underline: #cfcfcf; /* nav underline indicator (light grey) */ --c-on-dark: #fff; /* text/icons on a dark fill */ /* Elevation */ --shadow-bar: 0 2px 10px #14142b0d; /* header bar */ --shadow-pop: 0 18px 40px #14142b1f; /* dropdown panel */ /* Radii */ --r-bar: 14px; /* header bar, dropdown panel, burger */ --r-pill: 44px; /* CTA pill */ /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* standard ease-out for everything */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (burger pop) */ /* Layout */ --menu-origin: calc(100% - 46px) 52px; /* circular-reveal centre, near the burger */ } /* ============================================================================= 2. MOTION PRIMITIVE — scroll reveal Replaces Webflow IX2. Any element tagged `data-animation-reveal` starts hidden and is revealed by runtime.js (which adds `.is-visible`, then `.reveal-done`). • default : fade + blur + 26px rise • value "soft" : fade + blur only — no vertical move (used by the header so the bar never appears to drop in or sit low on load) • data-animation-delay="" : explicit stagger; the header steps by 100ms, scroll sections auto-stagger 150ms top-to-bottom in JS • --reveal-delay : per-element delay var that runtime.js sets before reveal ========================================================================== */ [data-animation-reveal] { opacity: 0; filter: blur(12px); transform: translateY(26px); transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, filter, transform; } [data-animation-reveal].is-visible { opacity: 1; filter: blur(0); transform: translateY(0); } [data-animation-reveal="soft"] { transform: none; /* no vertical travel */ transition-duration: 0.45s; } /* runtime.js adds this once the reveal transition ends, to release the GPU. */ [data-animation-reveal].reveal-done { will-change: auto; } @media (prefers-reduced-motion: reduce) { [data-animation-reveal] { opacity: 1; filter: none; transform: none; transition: none; } } /* ============================================================================= 3. HEADER — directional sticky behaviour The header is `position: sticky` (in the exported CSS). runtime.js adds `.header-hidden` when scrolling DOWN and removes it when scrolling UP or at the top — so the bar is effectively "sticky only on the way up". -115% slides it fully out of view including its shadow. ========================================================================== */ .header-sticky { transition: transform 0.35s ease; } .header-sticky.header-hidden { transform: translateY(-115%); } /* ============================================================================= 4. HEADER — bar & logo ========================================================================== */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 14px 12px 22px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-bar); box-shadow: var(--shadow-bar); } .site-logo { display: flex; align-items: center; text-decoration: none; } .site-logo img { height: 26px; display: block; } .site-header__right { display: flex; align-items: center; gap: 6px; } .site-nav { display: flex; align-items: center; gap: 2px; } /* ============================================================================= 5. HEADER — primary navigation (links + underline indicator) The dropdown item text in §6 deliberately matches these links (same colour, weight and size), so this is the single source of truth for nav typography. ========================================================================== */ .site-nav__link, .site-drop__toggle { appearance: none; background: none; border: 0; cursor: pointer; position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-family: inherit; font-size: 15px; font-weight: 400; color: var(--c-ink-soft); text-decoration: none; } .site-nav__link:hover, .site-drop:hover .site-drop__toggle { color: var(--c-ink); } /* The toggle only needs a colour transition; the links additionally carry the reveal transition (see note below). */ .site-drop__toggle { transition: color 0.25s var(--ease); } /* GOTCHA: a plain `transition: color` on the link would replace — and so wipe out — the reveal transition inherited from §2, making the links pop in instantly instead of staggering. So the link declares BOTH: the hover colour AND the reveal (opacity/filter, honouring --reveal-delay). */ .site-nav__link { transition: color 0.25s var(--ease), opacity 0.45s var(--ease) var(--reveal-delay, 0ms), filter 0.45s var(--ease) var(--reveal-delay, 0ms); } /* Light-grey underline that grows from the left on hover. */ .site-nav__link::after, .site-drop__toggle::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c-underline); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .site-nav__link:hover::after, .site-drop:hover .site-drop__toggle::after { transform: scaleX(1); } /* ============================================================================= 6. HEADER — dropdown menus (Resources + language) Open on hover (desktop) / tap (mobile) via runtime.js, which toggles `.is-open`. The panel fades + de-blurs in and reverses out. ========================================================================== */ .site-flag { width: 18px; height: auto; display: inline-block; margin-right: 2px; } .site-chev { font-family: 'Line Rounded Icons'; font-size: 13px; transition: transform 0.3s var(--ease); } .site-drop { position: relative; } .site-drop.is-open .site-chev { transform: rotate(180deg); } .site-drop__panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 240px; padding: 10px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-bar); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; filter: blur(10px); /* visibility is delayed out so the panel is non-interactive while fading. */ transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), filter 0.28s var(--ease), visibility 0s 0.28s; z-index: 30; } .site-drop.is-open .site-drop__panel { opacity: 1; visibility: visible; filter: blur(0); transform: translateX(-50%) translateY(0); transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), filter 0.32s var(--ease), visibility 0s; } /* Caret connecting the panel to its toggle. */ .site-drop__panel::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; background: var(--c-surface); border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); transform: translateX(-50%) rotate(45deg); z-index: 1; } /* Invisible bridge spanning the 12px gap between toggle and panel, so moving the pointer down into the panel never crosses dead space (which caused flicker). */ .site-drop__panel::after { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 18px; } .site-drop__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 15px; /* matches .site-nav__link */ font-weight: 400; color: var(--c-ink-soft); transition: background-color 0.22s var(--ease), color 0.22s var(--ease); } .site-drop__item:hover { background: var(--c-surface-2); color: var(--c-ink); } .site-drop__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--c-surface-2); } .site-drop__ic img { width: 16px; height: 16px; } /* ============================================================================= 7. HEADER — call-to-action button Mirrors the exported ".btn-secondary" (grey fill → dark on hover) but WITHOUT the lift, so hovering it never nudges the bar and misaligns the header. It also carries the reveal transition (same reason as the nav links in §5). ========================================================================== */ .site-cta { display: inline-flex; align-items: center; padding: 12px 20px; background: var(--c-fill); color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--r-pill); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.45s var(--ease) var(--reveal-delay, 0ms), filter 0.45s var(--ease) var(--reveal-delay, 0ms); } .site-cta:hover { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); } /* ============================================================================= 8. HEADER — hamburger (mobile trigger) Hidden on desktop; shown ≤991px (§9). Two bars that cross into an X with a spring overshoot when the menu opens (state driven from .menu-open). ========================================================================== */ .site-burger { display: none; /* shown as grid at ≤991px (§9) */ position: relative; z-index: 120; /* above the menu so it always closes it */ place-items: center; width: 44px; height: 44px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-bar); cursor: pointer; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease); } .site-burger i { position: absolute; width: 20px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform 0.42s var(--ease); } .site-burger i:first-child { transform: translateY(-4px); } .site-burger i:last-child { transform: translateY(4px); } /* ============================================================================= 9. MOBILE — circular-reveal menu A full-screen overlay that wipes open from a circle centred on the burger (--menu-origin). Sits BELOW the sticky header (z 9000 < 99999) so the logo and the X stay visible and tappable on top. Open state lives on .menu-open (set in runtime.js) so the fixed overlay is immune to the header's transform. ========================================================================== */ .mobile-menu { display: none; /* shown as flex at ≤991px */ position: fixed; inset: 0; z-index: 9000; flex-direction: column; justify-content: center; padding: 120px 28px 40px; /* top clears the header bar */ background: var(--c-surface); clip-path: circle(0px at var(--menu-origin)); visibility: hidden; transition: clip-path 0.55s var(--ease), visibility 0s 0.55s; } .mobile-menu__item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--c-line); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--c-ink); text-decoration: none; opacity: 0; transform: translateY(14px); /* staggered in by .menu-open below */ transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.25s var(--ease); } .mobile-menu__ar { font-family: 'Line Rounded Icons'; font-size: 18px; color: var(--c-edge); opacity: 0; transform: translateX(-8px); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), color 0.25s var(--ease); } /* Hover follows the global rule: a dark item lightens, its faint arrow darkens. */ .mobile-menu__item:hover { color: var(--c-ink-faint); } .mobile-menu__item:hover .mobile-menu__ar { color: var(--c-ink); } .mobile-menu__sub { margin-top: auto; opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease) 0.46s, transform 0.45s var(--ease) 0.46s; } .mobile-lang { display: flex; gap: 10px; } .mobile-lang a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--c-border); border-radius: 30px; font-size: 15px; font-weight: 500; color: var(--c-ink); text-decoration: none; } .mobile-lang a img { width: 22px; height: auto; display: block; } /* full flag, no zoom/round */ .mobile-lang a.is-current { background: var(--c-ink); color: var(--c-on-dark); border-color: var(--c-ink); } /* — breakpoint: collapse the desktop nav into the hamburger — */ @media screen and (max-width: 991px) { .site-nav, .site-cta { display: none; } .site-burger { display: grid; } .mobile-menu { display: flex; } } /* — open state (class on ) — */ .menu-open, .menu-open body { overflow: hidden; } /* lock page scroll */ .menu-open .mobile-menu { clip-path: circle(150% at var(--menu-origin)); visibility: visible; transition: clip-path 0.6s var(--ease), visibility 0s; } .menu-open .mobile-menu__item { opacity: 1; transform: none; } .menu-open .mobile-menu__item:nth-child(1) { transition-delay: 0.22s; } .menu-open .mobile-menu__item:nth-child(2) { transition-delay: 0.28s; } .menu-open .mobile-menu__item:nth-child(3) { transition-delay: 0.34s; } .menu-open .mobile-menu__item:nth-child(4) { transition-delay: 0.40s; } .menu-open .mobile-menu__item .mobile-menu__ar { opacity: 1; transform: none; } .menu-open .mobile-menu__sub { opacity: 1; transform: none; } /* burger → X with a spring overshoot (the chosen "Spring bounce" interaction) */ .menu-open .site-burger { animation: site-burger-pop 0.5s var(--spring); } .menu-open .site-burger i:first-child { transform: rotate(45deg); } .menu-open .site-burger i:last-child { transform: rotate(-45deg); } @keyframes site-burger-pop { 0% { transform: scale(1); } 45% { transform: scale(0.82); } 100% { transform: scale(1); } } /* ============================================================================= 10. CONTENT — hero interactions & spacing ========================================================================== */ /* "My name is Mauro Sicard" card: scale down + nudge its arrow (matches live). */ .get-in-touch-card { transition: transform 0.3s var(--ease); } .get-in-touch-card .icon-link { display: inline-block; transition: transform 0.3s var(--ease); } .get-in-touch-card:hover { transform: scale(0.96); } .get-in-touch-card:hover .icon-link { transform: translateX(3px); } /* Tighten the hero rhythm: pill → heading to 2/3 (22→15px); subtext → buttons to 1/2 (40→20px, split across the paragraph and its wrapper). Scoped to the hero. */ .home-section-1 .get-in-touch-card { margin-bottom: 15px; } .home-section-1 .mg-bottom-24px { margin-bottom: 12px; } .home-section-1 .mg-bottom-24px p { margin-bottom: 8px; } /* ============================================================================= 11. CONTENT — link & card hover micro-interactions Native replacements for the Webflow IX2 hovers that were removed. ========================================================================== */ /* "Want to know more" cards: the arrow slides forward; text + arrow fade to 80%. */ .link-wrapper .link-text, .link-wrapper .link-icon-right { transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .card:hover .link-wrapper .link-icon-right { transform: translateX(6px); opacity: 0.8; } .card:hover .link-wrapper .link-text { opacity: 0.8; } /* "Currently working on" company cards: the circular arrow only changes its background to dark grey on hover — the glyph itself stays put. */ .arrow-external-wrapper { transition: background-color 0.3s ease, color 0.3s ease; } .link-card:hover .arrow-external-wrapper { background-color: var(--c-ink); color: var(--c-on-dark); } /* About-page list icons: the exported CSS rounds these (4px); keep them square. */ .about-item-icon { border-radius: 0; } /* Article listing cards (replaces removed Webflow IX2): on hover the card eases down to 0.96, the cover zooms to 1.08, and the circular arrow fades in. The card also carries the reveal transition so it still staggers in on scroll. */ .article-card { transition: transform 0.4s var(--ease), opacity 0.7s var(--ease) var(--reveal-delay, 0ms), filter 0.7s var(--ease) var(--reveal-delay, 0ms); } .article-card:hover { transform: scale(0.96); } .card-article-image-wrapper .article-image { transition: transform 0.45s var(--ease); } .article-card:hover .article-image { transform: scale(1.08); } .arrow-external-wrapper.article { display: flex; opacity: 0; transform: scale(0.8); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .article-card:hover .arrow-external-wrapper.article { opacity: 1; transform: translate(4px, -4px) scale(1); } /* Home "Recent posts" side cards (matches live): cover zooms, title fades to grey. */ .blog-card-image-wrapper .blog-card-image { transition: transform 0.45s var(--ease); } .blog-card-wrapper:hover .blog-card-image { transform: scale(1.1); } .blog-card-wrapper .blog-card-title { transition: color 0.25s var(--ease); } .blog-card-wrapper:hover .blog-card-title { color: var(--c-ink-faint); } /* Article single — "Latest articles" header button hugs the right of its grid cell instead of stretching full-width (the exported CSS did this via a generated w-node id we removed). */ .title-and-button .btn-secondary { justify-self: end; } /* Book single — "Book highlights" download card (Option 02 · horizontal tile): white, fully clickable, icon in a tile aligned to the TOP of the text. The combined transition keeps the scroll-reveal working. */ .card.libros-quote { display: flex; flex-direction: row; align-items: flex-start; /* tile aligns to the top of the subtext */ gap: 18px; background-color: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: none; padding: 20px; text-decoration: none; color: var(--c-ink); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.4s var(--ease), opacity 0.7s var(--ease) var(--reveal-delay, 0ms), filter 0.7s var(--ease) var(--reveal-delay, 0ms); } a.card.libros-quote:hover { border-color: var(--c-border); /* very subtle darken (#efefef → #e7e7e7) */ box-shadow: 0 3px 10px #14142b0a; /* ~25% of the previous shadow, no lift */ } .libros-quote__tile { flex: none; width: 52px; height: 52px; border-radius: 13px; background: var(--c-surface-2); display: grid; place-items: center; } .libros-quote__tile .book-highlight-icon { width: 26px; height: 26px; opacity: 1; } .card.libros-quote p { margin: 0; color: var(--c-ink-soft); } /* grey intro, like the option */ .card.libros-quote .link-wrapper { margin-top: 10px; } /* tight gap to the download link */ a.card.libros-quote .link-icon-right { display: inline-block; transition: transform 0.25s var(--ease); } a.card.libros-quote:hover .link-icon-right { transform: translateX(4px); } /* Cognitive Toolkit — accordion cards (replaces Webflow IX2). runtime.js sets the open height; CSS animates it and flips the +/- icon into a minus. */ .mental-card.accordion .accordion-content { height: 0; opacity: 0; overflow: hidden; transition: height 0.35s var(--ease), opacity 0.35s var(--ease); } .mental-card.accordion.is-open .accordion-content { opacity: 1; } .mental-card.accordion .line-accordion.middle { transition: transform 0.3s var(--ease); } .mental-card.accordion.is-open .line-accordion.middle { transform: rotate(90deg); } /* Error pages (404 / 401) — simple emoji-led layout, vertically centred with balanced space above and below (symmetric padding, no extra section wrapper). */ .error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 72px 24px; } .error-page__inner { max-width: 520px; } .error-page__emoji { font-size: 56px; line-height: 1; } .error-page__title { font-size: 28px; letter-spacing: -0.02em; margin: 16px 0 8px; } .error-page__text { color: var(--c-ink-faint); margin: 0 0 24px; } .error-page__btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--c-ink); color: var(--c-on-dark); border: 1px solid var(--c-ink); padding: 13px 24px; border-radius: var(--r-pill); font-weight: 500; font-size: 15px; transition: transform 0.25s var(--ease), background-color 0.25s var(--ease); } .error-page__btn:hover { transform: translateY(-2px); background: var(--c-ink-soft); } .error-page__btn .arrow { font-family: 'Line Rounded Icons'; font-size: 14px; } /* ============================================================================= 12. GLOBAL — neutralise legacy accent (purple) hovers The exported CSS turns several hovers the brand purple (--accent--primary-1). Site-wide rule instead: a grey element darkens, a dark element lightens — no blue/purple anywhere. (These classes appear on pages beyond the homepage.) ========================================================================== */ .footer-link:hover { color: var(--c-ink); } /* grey link → dark grey */ .heading-link:hover { color: var(--c-ink-faint); } /* dark link → light grey */ .input:hover, .input:focus { border-color: var(--c-ink); } /* grey border → dark grey */ /* ============================================================================= 13. COMPONENT — book cover hover Verbatim port of the original per-page Webflow