/* ============================================================ KINETICDIGITS — style.css Tokens → Reset → Layout → Components → Interactive → Responsive ============================================================ */ /* ============================================================ 1. DESIGN TOKENS Light/dark auto via prefers-color-scheme Manual override: add class "theme-light" or "theme-dark" to ============================================================ */ :root { /* Typography */ --font-primary: "IBM Plex Serif", serif; --font-title: "Rubik", sans-serif; /* Layout */ --content-margin: 16.5%; --section-gap: 2rem; --section-gap-top: 2rem; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 5rem; --space-xl: 8rem; /* Type scale */ --text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.4rem); --text-md: clamp(1.2rem, 1.05rem + 0.6vw, 1.7rem); --text-lg: clamp(1.5rem, 1.2rem + 1vw, 2.0rem); --text-xl: clamp(2rem, 1.5rem + 1.8vw, 2.7rem); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 400ms; } /* Dark theme (system default) */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0a0a0a; --color-bg-alt: #111111; --color-text: #ebebeb; --color-text-muted: #afafaf; --color-border: rgba(255, 255, 255, 0.16); --color-link: #ebebeb; --color-link-hover: #aaa; } } /* Light theme */ @media (prefers-color-scheme: light) { :root { --color-bg: #eef3f4; --color-bg-alt: #eceae5; --color-text: #0e0e0e; --color-text-muted: #484848; --color-border: rgba(0, 0, 0, 0.162); --color-link: #0e0e0e; --color-link-hover: #555; } } /* ============================================================ 2. RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-primary); font-size: var(--text-base); line-height: 1.6; font-optical-sizing: auto; font-weight: 350; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } img, video { display: block; max-width: 100%; } p em { font-style: italic; color: inherit; /* inherits your paragraph color */ /* Optional: very subtle extra styling */ /* letter-spacing: -0.02em; */ } /* ============================================================ 3. LAYOUT .section-inner — constrained (side margins) .section-inner.full-width — full viewport width ============================================================ */ .section-inner { width: 100%; padding-left: var(--content-margin); padding-right: var(--content-margin); } .section-inner.full-width { padding-left: 0; padding-right: 0; } .section { content-visibility: auto; contain-intrinsic-size: 1px 500px; padding-bottom: var(--space-lg); } .section:last-of-type { padding-bottom: 0; } .section:first-of-type { padding-top: 0; padding-bottom: clamp(4rem, 4rem + 5.5vw, 11rem); } /* ============================================================ 4. HERO SECTION ============================================================ */ .pageTitleCnt { position: absolute; transform: translateY(-55%); left: -1%; text-align: center; margin-left: var(--content-margin); margin-right: var(--content-margin); z-index: 1; margin-bottom: var(--space-md); } #hero-title { background-color: var(--color-bg); width: fit-content; font-family: var(--font-title); font-size: 4.3cqw; font-weight: 600; line-height: 1.2; letter-spacing: 0.045em; text-transform: uppercase; padding: 0.7rem 1rem 0.7rem 0.7rem; } #hero-subtitle { margin-top: -2px; background-color: var(--color-bg); font-size: 3.35cqw; font-weight: 400; line-height: 1.4; padding: 0rem 0rem 0rem 0.7rem; text-align: left; } /* ============================================================ 5. MEDIA — VIDEO ============================================================ */ .video-wrap { width: 100%; overflow: hidden; background-color: var(--color-bg-alt); } .video { width: 100%; height: auto; display: block; pointer-events: none; user-select: none; -webkit-user-select: none; } /* ============================================================ 6. COMPONENTS — TEXT BLOCKS ============================================================ */ .text-block { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; max-width: 100%; margin-bottom: var(--space-lg); } .text-block_cnt { width: 45ch; } .text-block__body a { font-size: var(--text-lg); } .text-block__label { display: block; width: 100%; font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: 0.12em; font-weight: 500; text-transform: uppercase; font-family: var(--font-title); margin-bottom: var(--space-md); } .text-block__body { font-size: var(--text-base); color: var(--color-text); line-height: 1.9; margin-bottom: var(--space-sm); font-weight: 400; } .text-block__body_alt { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; /* margin-bottom: var(--space-sm); */ font-weight: 500; } .text-block__body:last-child { margin-bottom: 0; } .text-block-img { width: 40%; height: auto; /* min-width: 250px; */ /* min-height: 250px; */ padding: 0 2rem 0 2rem; /* background-color: var(--color-bg-alt); */ } /* ============================================================ 7. INTERACTIVE — LINKS ============================================================ */ a { color: var(--color-link); font-style: italic; text-decoration: none; background-color: transparent; padding: 0 2px; transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } a:hover { color: #1a1a1a; background-color: yellow; } /* ============================================================ 8. COMPONENTS — FOOTER ============================================================ */ .footer { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .footer-inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); } .footer-name { font-family: var(--font-title); font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .footer-nav { display: flex; gap: var(--space-md); } .footer-link { /* font-family: var(--font-title); */ font-size: var(--text-sm); color: var(--color-text-muted); /* font-style: normal; */ font-weight: 500; background-color: transparent; padding: 0 2px; transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .footer-link:hover { color: #1a1a1a; background-color: yellow; } .border-top { border-top: 1px solid var(--color-border); } .border-bottom { border-bottom: 1px solid var(--color-border); } /* ============================================================ 9. RESPONSIVE — TABLET (≤ 1024px) ============================================================ */ @media (max-width: 1024px) { :root { --content-margin: 8%; --section-gap: 4rem; } #hero-title { font-size: 5.8cqw; } #hero-subtitle { font-size: 4.05cqw; } } /* ============================================================ 10. RESPONSIVE — MOBILE (≤ 640px) All sections full width. Safe padding on text sections only. ============================================================ */ @media (max-width: 640px) { :root { --content-margin: 0%; --section-gap: 2.5rem; --text-md: 1.05rem; } #hero-title { font-size: 10.25cqw; } #hero-subtitle { font-size: 4.55cqw; } .section { padding-bottom: var(--space-md); } /* All sections full width */ .section-inner, .section-inner.full-width { padding-left: 0; padding-right: 0; } /* Restore safe padding on text sections */ #method .section-inner, #title-forms, #title-systems, #systems .section-inner, #about .section-inner, #transition .section-inner, #footer .section-inner { padding-left: var(--space-md); padding-right: var(--space-md); } .footer-inner { flex-direction: column; gap: var(--space-sm); } .footer-nav { flex-direction: column; flex-wrap: wrap; gap: var(--space-sm); } .footer-link { font-size: var(--text-base); } .footer-name { font-size: var(--text-base); } .pageTitleCnt { /* padding-left: var(--space-md); padding-right: var(--space-md); */ } .text-block { max-width: 100%; } .text-block_cnt { width: 100%; } }