/* ========================================================================== [TAG: BASE CSS FILE] Global variables (Tokens), base typography and utilities. ========================================================================== */ /* ----------------------------------------------------------- [TAG: TOKENS - GLOBAL VARIABLES] ----------------------------------------------------------- */ :root { /* Core Colors */ --off-black: #0f0f0f; --off-white: #f5f5f5; --grey: #888888; --white: #ffffff; --border-subtle: rgba(255, 255, 255, 0.1); --border-light: rgba(0, 0, 0, 0.1); /* Dynamic Theme Variables (Dark by default) */ --bg-current: var(--off-black); --text-current: var(--off-white); --border-current: var(--border-subtle); /* Fluid Type Scale */ --fs-h1: clamp(30px, 5vw, 40px); --fs-h2: clamp(24px, 4vw, 30px); --fs-body: clamp(14px, 2vw, 16px); --fs-label: 12px; --fs-nav: 12px; --fs-micro: 11px; --fs-token: 10px; --fs-icon: 24px; /* Type Weights & Spacing */ --fw-bold: 800; --fw-medium: 600; --fw-light: 300; --ls-caps: 0.15em; --ls-action: 0.2em; --lh-tight: 1.1; --lh-base: 1.6; /* Viewport Heights */ --vh-100: 100vh; --vh-75: 75vh; --vh-50: 50vh; /* Spacing Scale */ --space-xs: 0.5rem; --space-s: 1.5rem; --space-m: 3rem; --space-l: 5rem; --space-xl: 7.5rem; --section-pt: var(--space-l); --section-pb: var(--space-xl); /* [TAG: NAV TOKENS] */ --nav-height: 100px; /* [TAG: GRID TOKENS] */ --grid-columns: 12; --grid-gap: 24px; --page-margin: 64px; --container-max: 1440px; /* [TAG: Z-INDEX TOKENS] */ --z-base: 1; --z-nav: 100; --z-cursor: 9999; /* [TAG: ANIMATION TOKENS] */ --ease-ui: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-editorial: cubic-bezier(0.45, 0, 0.15, 1); --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1); --ease-drop: cubic-bezier(0.34, 1.56, 0.64, 1); --time-fast: 0.3s; --time-base: 0.4s; --time-slow: 0.8s; --time-carousel-move: 3s; /* [TAG: IMAGE EFFECT TOKENS] */ --scale-img-hover: 1.05; --filter-bw: grayscale(100%); } /* ----------------------------------------------------------- [TAG: THEME SYSTEM] Automatic variable inversion for light sections. ----------------------------------------------------------- */ .theme-light { --bg-current: var(--white); --text-current: var(--off-black); --border-current: var(--border-light); background-color: var(--bg-current); color: var(--text-current); } /* ----------------------------------------------------------- [TAG: RESET & BASE STYLES] ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* ----------------------------------------------------------- [TAG: CUSTOM CURSOR ACTIVATION] Single switch: the .cursor-active class on , added by JS only on fine-pointer (mouse) devices. While present, the native cursor is hidden AND the custom dot is shown; when absent (JS fails, or touch input) the native cursor shows and the dot stays hidden. Since both depend on the same class, you never see both at once. ----------------------------------------------------------- */ .custom-cursor { display: none; } html.cursor-active .custom-cursor { display: block; } html.cursor-active, html.cursor-active * { cursor: none; } html, body { overflow-x: hidden; width: 100%; } body { background-color: var(--bg-current); color: var(--text-current); font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 0; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } /* ----------------------------------------------------------- [TAG: EDITORIAL TYPOGRAPHY] ----------------------------------------------------------- */ .display-h1 { font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: var(--lh-tight); margin: 0 0 var(--space-s) 0; } .display-h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-tight); margin: 0 0 var(--space-s) 0; } .body-text { font-size: var(--fs-body); font-weight: var(--fw-light); max-width: 650px; margin: 0 0 var(--space-m) 0; } .label { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; margin: 0 0 var(--space-xs) 0; } .meta-desc { font-size: var(--fs-label); color: var(--grey); margin: 0; } .meta-text { font-size: var(--fs-token); color: var(--grey); margin: 0 0 var(--space-xs) 0; letter-spacing: var(--ls-caps); text-transform: uppercase; } /* ----------------------------------------------------------- [TAG: UI COMPONENTS - BUTTONS & LINKS] ----------------------------------------------------------- */ .nav-soft-move { display: inline-block; color: inherit; text-decoration: none; text-transform: uppercase; font-size: var(--fs-nav); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); transition: transform var(--time-base) var(--ease-ui), opacity var(--time-base) ease; } .nav-soft-move:hover { transform: translateY(-3px); opacity: 0.5; } .pill-btn { background: none; border: 1px solid var(--border-current); color: var(--text-current); padding: 8px 20px; border-radius: 30px; font-size: var(--fs-micro); text-transform: uppercase; transition: all var(--time-fast); } .pill-btn.active, .pill-btn:hover { background: var(--text-current); color: var(--bg-current); } .btn-editorial { display: inline-flex; align-items: center; text-decoration: none; text-transform: uppercase; color: inherit; font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-action); } .arrow-formatted { display: inline-block; margin-left: 15px; font-weight: var(--fw-bold); transition: transform var(--time-fast) var(--ease-ui); } .btn-editorial:hover .arrow-formatted { transform: translateX(8px); } /* ----------------------------------------------------------- [TAG: SPACING UTILITIES & CURSOR] ----------------------------------------------------------- */ .py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); } .py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } .py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); } .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .custom-cursor { width: 14px; height: 14px; background-color: var(--white); border-radius: 50%; position: fixed; pointer-events: none; z-index: var(--z-cursor); mix-blend-mode: difference; transition: transform var(--time-fast) var(--ease-ui); transform: translate(-50%, -50%); } .custom-cursor.is-hovering { transform: translate(-50%, -50%) scale(2); } /* ----------------------------------------------------------- [TAG: IMAGE EFFECTS] Hover interaction classes for photography. ----------------------------------------------------------- */ .img-mask { overflow: hidden; position: relative; display: block; } .img-fx { display: block; width: 100%; height: auto; transition: transform var(--time-base) var(--ease-ui), filter var(--time-base) var(--ease-ui); } .img-mask:hover .fx-zoom { transform: scale(var(--scale-img-hover)); } .img-mask:hover .fx-bw { filter: var(--filter-bw); } .fx-color-reveal { filter: var(--filter-bw); } .img-mask:hover .fx-color-reveal { filter: grayscale(0%); } /* ----------------------------------------------------------- [TAG: IMAGE ERROR FALLBACK] Applied by JS (.img-error) when an image fails to load. Shows a neutral block instead of a broken-image icon; the alt text stays available to screen readers. ----------------------------------------------------------- */ img.img-error { background: var(--border-current); object-fit: cover; color: transparent; } /* ----------------------------------------------------------- [TAG: PAGE ENTRANCE - STAGGERED REVEAL] Sequential entrance: on page load the main blocks appear top to bottom with a slight stagger between each (opacity + short translate), instead of all at once. Pure CSS: if JS fails, the content still reveals. Fully disabled under prefers-reduced-motion. ----------------------------------------------------------- */ @keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { body > section, body > footer { animation: reveal-up var(--time-base) var(--ease-editorial) both; } /* Top-to-bottom cascade: each block enters slightly later. */ body > section:nth-of-type(1) { animation-delay: 0.00s; } body > section:nth-of-type(2) { animation-delay: 0.10s; } body > section:nth-of-type(3) { animation-delay: 0.20s; } body > section:nth-of-type(4) { animation-delay: 0.30s; } body > section:nth-of-type(5) { animation-delay: 0.40s; } body > section:nth-of-type(6) { animation-delay: 0.50s; } body > footer { animation-delay: 0.55s; } } /* ----------------------------------------------------------- [TAG: REDUCED MOTION] Global fallback for users who ask their OS to reduce motion. Neutralizes looping/auto animations (marquees, carousel slide) and makes transitions effectively instant, while keeping the site fully usable. The carousel's JS auto-advance is also disabled separately. ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }