/* ========================================================================== OtsoSoftware - Material Design (GM2) layer -------------------------------------------------------------------------- Sits on top of Material Components Web 14 (/lib/mdc/). This file owns: 1. the Google palette + light/dark surface tokens 2. the type scale (Google Sans / Sans Text / Sans Display) and icon sizing 3. the app shell (top app bar, nav rail, modal drawer, content column) 4. every page section 5. dark-theme overrides for the MDC components actually used Dark mode is driven by [data-theme="dark"] on , set before paint by the inline bootstrap in _Layout.cshtml, so there is no flash of light. ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* Google GM2 brand colours - light */ --g-blue: #1a73e8; --g-red: #d93025; --g-yellow: #f9ab00; --g-green: #1e8e3e; /* surfaces */ --bg: #f1f3f4; /* grey 100 - page canvas */ --surface: #ffffff; /* cards, app bar */ --surface-variant: #f8f9fa; /* grey 50 - inset blocks */ --on-surface: #202124; /* grey 900 - body text */ --on-surface-var: #5f6368; /* grey 700 - secondary text */ --outline: #dadce0; /* grey 300 - hairlines */ --scrim: rgba(32, 33, 36, .6); /* state layers (Material ink ratios) */ --hover-opacity: .04; --state-on-surface: 32, 33, 36; --state-primary: 26, 115, 232; /* MD2 elevation */ --elev-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15); --elev-2: 0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15); --elev-4: 0 2px 4px 0 rgba(60,64,67,.30), 0 4px 10px 4px rgba(60,64,67,.15); --elev-8: 0 4px 8px 0 rgba(60,64,67,.30), 0 8px 16px 6px rgba(60,64,67,.15); --rail-w: 88px; --appbar-h: 64px; /* Snackbar uses Material's INVERSE surface: dark bar in the light theme, light bar in the dark one, the way Google's own products do it. */ --snackbar-bg: #323232; --snackbar-on: #ffffff; --snackbar-action: #8ab4f8; /* Google's own product type stack (see _Layout.cshtml) */ --font-display: 'Google Sans Display', 'Google Sans', Roboto, Arial, sans-serif; --font-ui: 'Google Sans', Roboto, Arial, sans-serif; --font-text: 'Google Sans Text', Roboto, Arial, sans-serif; /* MDC theme hooks */ --mdc-theme-primary: var(--g-blue); --mdc-theme-secondary: var(--g-blue); --mdc-theme-surface: var(--surface); --mdc-theme-background: var(--bg); --mdc-theme-on-primary: #fff; --mdc-theme-on-secondary: #fff; --mdc-theme-on-surface: var(--on-surface); --mdc-theme-text-primary-on-background: var(--on-surface); --mdc-theme-text-secondary-on-background: var(--on-surface-var); } [data-theme="dark"] { /* Google GM2 brand colours - dark variants (lighter tints, per spec) */ --g-blue: #8ab4f8; --g-red: #f28b82; --g-yellow: #fdd663; --g-green: #81c995; --bg: #202124; --surface: #292a2d; --surface-variant: #35363a; --on-surface: #e8eaed; --on-surface-var: #9aa0a6; --outline: #3c4043; --scrim: rgba(0, 0, 0, .6); --state-on-surface: 232, 234, 237; --state-primary: 138, 180, 248; /* dark surfaces lift by tint, but MD2 keeps the shadow too */ --elev-1: 0 1px 2px 0 rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.30); --elev-2: 0 1px 2px 0 rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.30); --elev-4: 0 2px 4px 0 rgba(0,0,0,.6), 0 4px 10px 4px rgba(0,0,0,.30); --elev-8: 0 4px 8px 0 rgba(0,0,0,.6), 0 8px 16px 6px rgba(0,0,0,.30); --mdc-theme-on-primary: #202124; --mdc-theme-on-secondary: #202124; --snackbar-bg: #e8eaed; --snackbar-on: #202124; --snackbar-action: #0b57d0; } /* ---------- 2. Base + type ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--appbar-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--on-surface); font-family: var(--font-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -.25px; } .t-display { font-size: clamp(40px, 7.5vw, 88px); line-height: 1.08; font-weight: 400; letter-spacing: -1.5px; } .t-h2 { font-size: clamp(28px, 3.4vw, 45px); line-height: 1.2; letter-spacing: -.5px; } .t-h6 { font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: .15px; } .t-sub { font-size: 16px; line-height: 1.6; color: var(--on-surface-var); } .t-body { font-size: 15px; line-height: 1.65; color: var(--on-surface-var); } .t-caption { font-size: 12px; line-height: 1.4; letter-spacing: .4px; color: var(--on-surface-var); } /* NOTE: there is deliberately no overline/eyebrow style here. Do not add one. */ /* Google Sans carries the UI layer: nav, chips, labels and card titles. CAREFUL: never put a bare descendant `span` in this list. Such a selector also matches the .material-symbols-outlined span nested inside, outranks Google's own .material-symbols-outlined rule (0,1,1 vs 0,1,0), swaps the icon font for a text font and renders the ligature name as literal words - "dns", "videocam". Target a named label class instead. */ .otso-appbar-links a, .otso-rail-item, .otso-chip, .filter-chip, .step-header, .skill-numb, .skill-keys span, .project-name, .project-tags span, .project-link, .project-private, .project-meta, .contact-item .ci-label, .contact-item .ci-value, .hl-label, .numb-card span, .mdc-list-item__primary-text { font-family: var(--font-ui); } /* Belt and braces for the above: restate the icon font at a specificity no descendant-span rule can quietly beat. The @font-face itself still comes from Google's stylesheet; this only pins which family the glyphs come from. */ span.material-symbols-outlined, .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } /* Links never underline by default. Underline-on-hover is opt-in, and applies only to links sitting in running text - never to buttons, nav or cards, which is where the stray underline came from. */ a { color: var(--g-blue); text-decoration: none; } .otso-footer a:hover, .contact-item .ci-value a:hover { text-decoration: underline; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- 3. App shell ------------------------------------------------- */ /* --- top app bar --- */ .otso-appbar.mdc-top-app-bar { background: var(--surface); color: var(--on-surface); box-shadow: none; border-bottom: 1px solid var(--outline); transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; } /* MD2: the bar only lifts once content scrolls under it */ .otso-appbar.mdc-top-app-bar--fixed-scrolled, .otso-appbar.is-scrolled { box-shadow: var(--elev-4); border-bottom-color: transparent; } .otso-appbar .mdc-top-app-bar__row { height: var(--appbar-h); padding: 0 8px; } .otso-menu-btn { display: none; } /* The wordmark is the owner's own artwork: transparent PNG, Google palette, so one file serves both themes exactly like Google's own logo does. */ .otso-brand { display: flex; align-items: center; padding: 0 8px; } .otso-logo { height: 24px; width: auto; display: block; } .otso-drawer .otso-logo { height: 22px; } .otso-appbar-links { display: flex; align-items: center; gap: 4px; margin-left: 24px; } .otso-appbar-links a { color: var(--on-surface-var); font-size: 14px; font-weight: 500; letter-spacing: .25px; padding: 8px 12px; border-radius: 4px; transition: background-color .15s ease, color .15s ease; } .otso-appbar-links a:hover { text-decoration: none; color: var(--on-surface); background: rgba(var(--state-on-surface), .06); } /* Active state comes from , i.e. the router. */ .otso-appbar-links a.is-active { color: var(--g-blue); background: rgba(var(--state-primary), .12); } .otso-appbar .mdc-icon-button { color: var(--on-surface-var); } /* --- app launcher: the Google 3x3 services grid --- */ .otso-launcher { position: relative; display: inline-flex; } /* Invisible full-screen catcher so a click anywhere else closes the panel. Sits below the panel, above everything else. */ .launcher-backdrop { position: fixed; inset: 0; z-index: 18; } .launcher-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 19; width: 328px; padding: 20px; background: var(--surface); border: 1px solid var(--outline); border-radius: 12px; box-shadow: var(--elev-8); transform-origin: top right; animation: launcher-in .14s cubic-bezier(0, 0, .2, 1); } @keyframes launcher-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } .launcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .launcher-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 8px; color: var(--on-surface); font-family: var(--font-ui); font-size: 13px; line-height: 1.3; text-align: center; transition: background-color .15s ease; } .launcher-tile:hover { text-decoration: none; background: rgba(var(--state-on-surface), .06); } .launcher-tile .tile-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .launcher-tile .tile-icon .material-symbols-outlined { font-size: 22px; } .launcher-tile .tile-label { font-size: 13px; line-height: 1.3; word-break: break-word; } .tile-icon.tone-blue { background: rgba(26,115,232,.14); color: var(--g-blue); } .tile-icon.tone-red { background: rgba(217,48,37,.12); color: var(--g-red); } .tile-icon.tone-yellow { background: rgba(249,171,0,.16); color: #e37400; } .tile-icon.tone-green { background: rgba(30,142,62,.12); color: var(--g-green); } .tile-icon.tone-grey { background: rgba(var(--state-on-surface), .08); color: var(--on-surface-var); } [data-theme="dark"] .tile-icon.tone-blue { background: rgba(138,180,248,.16); } [data-theme="dark"] .tile-icon.tone-red { background: rgba(242,139,130,.16); } [data-theme="dark"] .tile-icon.tone-yellow { background: rgba(253,214,99,.16); color: var(--g-yellow); } [data-theme="dark"] .tile-icon.tone-green { background: rgba(129,201,149,.16); } /* scroll progress - a Material linear indicator on the bar's bottom edge */ .otso-progress { position: absolute; bottom: -1px; left: 0; height: 3px; width: 0; background: var(--g-blue); transition: width .1s linear; } /* --- navigation rail (desktop) --- */ .otso-rail { position: fixed; top: var(--appbar-h); left: 0; bottom: 0; width: var(--rail-w); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; background: var(--surface); border-right: 1px solid var(--outline); z-index: 5; transition: background-color .2s ease, border-color .2s ease; } .otso-rail-item { width: 72px; padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--on-surface-var); font-size: 11px; font-weight: 500; letter-spacing: .3px; border-radius: 12px; transition: color .15s ease; } .otso-rail-item:hover { text-decoration: none; color: var(--on-surface); } .otso-rail-item .rail-icon { width: 56px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease; } .otso-rail-item:hover .rail-icon { background: rgba(var(--state-on-surface), .06); } /* active pill - the Google nav-rail signature */ .otso-rail-item.is-active { color: var(--g-blue); } .otso-rail-item.is-active .rail-icon { background: rgba(var(--state-primary), .14); color: var(--g-blue); } /* --- modal drawer (mobile nav) --- */ .otso-drawer.mdc-drawer { background: var(--surface); border-color: var(--outline); } .otso-drawer .mdc-drawer__header { padding: 20px 16px 8px; } .otso-drawer .mdc-list-item { color: var(--on-surface-var); border-radius: 0 24px 24px 0; margin-right: 8px; } .otso-drawer .mdc-list-item__start { margin-right: 24px; color: inherit; } .otso-drawer .mdc-list-item__primary-text { color: inherit; font-weight: 500; } .otso-drawer .mdc-list-item:hover { background: rgba(var(--state-on-surface), .06); } .mdc-drawer-scrim { background: var(--scrim); } /* --- content column --- */ .otso-content { margin-left: var(--rail-w); padding: calc(var(--appbar-h) + 24px) 32px 0; } .otso-wrap { max-width: 1280px; margin: 0 auto; } .otso-section { padding: 48px 0; } /* Each routable page opens with the same header block. */ .page-head { margin: 8px 0 32px; } .page-head .t-h2 { margin-bottom: 12px; } .page-head .t-sub { max-width: 62ch; } /* --- footer --- */ .otso-footer { margin-top: 48px; padding: 32px 0 40px; border-top: 1px solid var(--outline); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .otso-footer-lines { display: grid; gap: 6px; } .otso-social { display: flex; gap: 4px; } .otso-social a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--on-surface-var); transition: background-color .15s ease, color .15s ease; } .otso-social a:hover { background: rgba(var(--state-on-surface), .08); color: var(--on-surface); } .otso-social svg { width: 20px; height: 20px; fill: currentColor; } /* ---------- 4. Cards (shared) -------------------------------------------- */ .otso-card { background: var(--surface); border-radius: 8px; box-shadow: var(--elev-1); transition: box-shadow .2s ease, background-color .2s ease; } /* MD2 pickable card: rests at 1dp, raises to 8dp on hover. Elevation is the whole gesture - no scaling, no translation. */ .otso-card--interactive:hover { box-shadow: var(--elev-8); } /* ---------- 5. Hero ------------------------------------------------------ */ /* The top of the page is a deliberate nod to the Google homepage: centred logo, a search field, two buttons, and a locale line underneath. The search is real - it indexes this page's own sections, skills and projects. */ .hero { padding: 48px 0 24px; text-align: center; } .hero-google { max-width: 620px; margin: 0 auto; } .hero-logo { margin: 0 0 22px; } .hero-logo img { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; } .hero-slogan { margin: 0 0 34px; font-family: var(--font-display); font-size: clamp(18px, 2.1vw, 24px); line-height: 1.35; color: var(--on-surface-var); font-weight: 400; } /* Google's search field: a pill with a hairline border that gives way to an elevation on hover and focus. */ .search-wrap { position: relative; } .search-box { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 18px; border: 1px solid var(--outline); border-radius: 24px; background: var(--surface); transition: box-shadow .18s ease, border-color .18s ease, background-color .2s ease; } .search-box:hover, .search-box:focus-within { border-color: transparent; box-shadow: var(--elev-2); } .search-box > .material-symbols-outlined { color: var(--on-surface-var); font-size: 22px; flex: none; } .search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: var(--font-text); font-size: 16px; color: var(--on-surface); } .search-box input::placeholder { color: var(--on-surface-var); } .search-clear { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--on-surface-var); cursor: pointer; transition: background-color .15s ease; } .search-clear:hover { background: rgba(var(--state-on-surface), .08); } /* suggestions - a Material menu surface */ .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 12; background: var(--surface); border-radius: 8px; box-shadow: var(--elev-8); overflow: hidden; padding: 8px 0; text-align: left; } .search-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 18px; border: 0; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 15px; color: var(--on-surface); text-align: left; transition: background-color .15s ease; } .search-item:hover { background: rgba(var(--state-on-surface), .06); } .search-item .material-symbols-outlined { color: var(--on-surface-var); font-size: 20px; flex: none; } .search-item .sr-kind { margin-left: auto; font-size: 12px; color: var(--on-surface-var); } .search-empty { padding: 10px 18px; font-size: 14px; color: var(--on-surface-var); text-align: left; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } .hero .chip-set { margin-top: 48px; } .hero-locale { margin: 30px 0 0; font-size: 14px; line-height: 1.6; color: var(--on-surface-var); } .hero-stack { margin-top: 16px; display: inline-flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; text-align: left; background: var(--surface); box-shadow: var(--elev-1); } .hero-stack .stack-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--state-primary), .14); color: var(--g-blue); display: flex; align-items: center; justify-content: center; flex: none; } .hero-stack h6 { font-size: 16px; font-weight: 500; letter-spacing: .15px; } .hero-stack p { margin: 2px 0 0; font-size: 13px; color: var(--on-surface-var); } /* chips - Material assist chips with a staggered entrance. Hover is a state layer (a tint at the spec's 4% / 12% opacities), NOT a lift or a nudge: Material moves elevation, never position. */ .chip-set { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .otso-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--outline); background: var(--surface); color: var(--on-surface-var); font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: .25px; transition: background-color .15s ease, color .15s ease; } .otso-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .otso-chip:hover { background: rgba(var(--state-on-surface), .04); color: var(--on-surface); } .otso-chip .dot.b { background: var(--g-blue); } .otso-chip .dot.r { background: var(--g-red); } .otso-chip .dot.y { background: var(--g-yellow); } .otso-chip .dot.g { background: var(--g-green); } /* entrance: replaces the matter.js toy with Material's own motion curve */ .chip-set .otso-chip { opacity: 0; animation: chip-in .42s cubic-bezier(0, 0, .2, 1) forwards; } .chip-set .otso-chip:nth-child(1) { animation-delay: .05s; } .chip-set .otso-chip:nth-child(2) { animation-delay: .10s; } .chip-set .otso-chip:nth-child(3) { animation-delay: .15s; } .chip-set .otso-chip:nth-child(4) { animation-delay: .20s; } .chip-set .otso-chip:nth-child(5) { animation-delay: .25s; } .chip-set .otso-chip:nth-child(6) { animation-delay: .30s; } @keyframes chip-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* highlight cards - the old Swiper carousel, flattened into a static row. Static cards do not react to hover in MD2; only actionable ones do. */ .highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; text-align: left; } .highlight { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 8px; } .highlight .hl-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; } .highlight:nth-child(1) .hl-icon { background: rgba(26,115,232,.14); color: var(--g-blue); } .highlight:nth-child(2) .hl-icon { background: rgba(217,48,37,.12); color: var(--g-red); } .highlight:nth-child(3) .hl-icon { background: rgba(30,142,62,.12); color: var(--g-green); } [data-theme="dark"] .highlight:nth-child(1) .hl-icon { background: rgba(138,180,248,.16); } [data-theme="dark"] .highlight:nth-child(2) .hl-icon { background: rgba(242,139,130,.16); } [data-theme="dark"] .highlight:nth-child(3) .hl-icon { background: rgba(129,201,149,.16); } .highlight span { font-size: 14px; font-weight: 500; line-height: 1.4; } /* ---------- 6. Expertise ------------------------------------------------- */ .expertise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .skill-card { padding: 24px; display: flex; flex-direction: column; } .skill-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .skill-icon { width: 48px; height: 48px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--state-primary), .12); color: var(--g-blue); } /* cycle the four Google colours across the nine cards */ .skill-card:nth-child(4n+2) .skill-icon { background: rgba(217,48,37,.10); color: var(--g-red); } .skill-card:nth-child(4n+3) .skill-icon { background: rgba(249,171,0,.14); color: #e37400; } .skill-card:nth-child(4n+4) .skill-icon { background: rgba(30,142,62,.10); color: var(--g-green); } [data-theme="dark"] .skill-card:nth-child(4n+1) .skill-icon { background: rgba(138,180,248,.16); } [data-theme="dark"] .skill-card:nth-child(4n+2) .skill-icon { background: rgba(242,139,130,.16); } [data-theme="dark"] .skill-card:nth-child(4n+3) .skill-icon { background: rgba(253,214,99,.16); color: var(--g-yellow); } [data-theme="dark"] .skill-card:nth-child(4n+4) .skill-icon { background: rgba(129,201,149,.16); } .skill-numb { font-size: 13px; font-weight: 500; color: var(--on-surface-var); letter-spacing: 1px; } .skill-card h3 { font-size: 20px; font-weight: 500; letter-spacing: .15px; margin-bottom: 8px; } .skill-card .desc { font-size: 14px; line-height: 1.6; color: var(--on-surface-var); margin: 0 0 16px; } .skill-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .skill-keys span { font-size: 12px; font-weight: 500; letter-spacing: .3px; padding: 4px 10px; border-radius: 12px; background: var(--surface-variant); color: var(--on-surface-var); border: 1px solid var(--outline); } /* ---------- 7. Projects -------------------------------------------------- */ .projects-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .filter-chip { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 16px; border: 1px solid var(--outline); background: var(--surface); color: var(--on-surface-var); font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .25px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .filter-chip:hover { background: rgba(var(--state-on-surface), .06); color: var(--on-surface); } .filter-chip.is-active { background: rgba(var(--state-primary), .14); border-color: transparent; color: var(--g-blue); } .filter-chip .material-symbols-outlined { font-size: 18px; } .projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* Uniform by design - do not reintroduce per-item sizing */ .project-card { position: relative; display: flex; flex-direction: column; overflow: hidden; } .project-thumb { aspect-ratio: 16 / 10; background: var(--surface-variant); overflow: hidden; } .project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; } .project-name { font-size: 18px; font-weight: 500; letter-spacing: .15px; margin-bottom: 6px; } .project-desc { font-size: 14px; line-height: 1.6; color: var(--on-surface-var); margin: 0 0 14px; } .project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .project-tags span { font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--surface-variant); color: var(--on-surface-var); } .project-foot { position: relative; z-index: 2; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--outline); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .project-meta { font-size: 12px; color: var(--on-surface-var); } .project-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--g-blue); } .project-link .material-symbols-outlined { font-size: 18px; } .project-private { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--on-surface-var); } .project-private .material-symbols-outlined { font-size: 16px; } /* Full-card hit area, under the footer link so the explicit link still wins. It carries the MDC ripple, so pressing a card gives the real Material touch response across the whole surface. */ .project-hit { position: absolute; inset: 0; z-index: 1; color: var(--on-surface); border-radius: 8px; } .projects-empty { text-align: center; color: var(--on-surface-var); padding: 32px 0; } /* ---------- 8. Process (stepper + expansion panels) ---------------------- */ .process-stepper { display: flex; flex-direction: column; max-width: 860px; } .step { display: grid; grid-template-columns: 32px 1fr; gap: 20px; } .step-rail { display: flex; flex-direction: column; align-items: center; } .step-dot { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; background: var(--surface-variant); color: var(--on-surface-var); border: 1px solid var(--outline); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .step.is-open .step-dot { background: var(--g-blue); color: var(--mdc-theme-on-primary); border-color: transparent; } .step-line { width: 1px; flex: 1; background: var(--outline); margin: 4px 0; } .step:last-child .step-line { display: none; } .step-panel { padding-bottom: 8px; } .step-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; margin: 0; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 500; letter-spacing: .15px; color: var(--on-surface); text-align: left; } .step-header .material-symbols-outlined { color: var(--on-surface-var); transition: transform .2s cubic-bezier(.4,0,.2,1); } .step.is-open .step-header .material-symbols-outlined { transform: rotate(180deg); } /* grid-template-rows animates cleanly without hard-coding a max-height */ .step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s cubic-bezier(.4,0,.2,1); } .step.is-open .step-body { grid-template-rows: 1fr; } .step-body > div { overflow: hidden; } .step-body p { margin: 8px 0 20px; font-size: 15px; line-height: 1.65; color: var(--on-surface-var); } /* ---------- 9. Numbers --------------------------------------------------- */ .numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; } .numb-card { padding: 32px 24px; text-align: center; } .numb-card h3 { font-size: clamp(40px, 5vw, 64px); font-weight: 400; letter-spacing: -1.5px; line-height: 1; } .numb-card:nth-child(1) h3 { color: var(--g-blue); } .numb-card:nth-child(2) h3 { color: var(--g-red); } .numb-card:nth-child(3) h3 { color: var(--g-green); } .numb-card span { display: block; margin-top: 12px; font-size: 14px; color: var(--on-surface-var); } /* ---------- 10. Contact -------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .contact-item { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 8px; } .contact-item .ci-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--state-primary), .12); color: var(--g-blue); } [data-theme="dark"] .contact-item .ci-icon { background: rgba(138,180,248,.16); } .contact-item .ci-label { font-size: 12px; letter-spacing: .4px; color: var(--on-surface-var); } .contact-item .ci-value { font-size: 16px; font-weight: 500; letter-spacing: .15px; margin-top: 2px; word-break: break-word; } .contact-item .ci-value a { color: var(--on-surface); } .contact-item .ci-value a:hover { color: var(--g-blue); } /* ---------- 11. CV ------------------------------------------------------- */ .cv-card { padding: 32px; max-width: 640px; } .cv-form { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .cv-field { width: 100%; max-width: 420px; } .cv-validation { color: var(--g-red); font-size: 13px; margin: -12px 0 0; } .cv-overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--scrim); } .cv-overlay[hidden] { display: none; } .cv-overlay-card { background: var(--surface); color: var(--on-surface); border-radius: 8px; box-shadow: var(--elev-8); padding: 28px 32px; min-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 15px; } /* MD2 indeterminate spinner (this MDC bundle has no circular progress) */ .cv-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(var(--state-primary), .25); border-top-color: var(--g-blue); animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- 12. MDC component overrides (incl. dark) --------------------- */ .mdc-button { font-family: var(--font-ui); letter-spacing: .25px; } .mdc-button:not(:disabled) { color: var(--g-blue); } .mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) { background-color: var(--g-blue); color: var(--mdc-theme-on-primary); } .mdc-button--outlined:not(:disabled) { color: var(--g-blue); border-color: var(--outline); } .mdc-button .material-symbols-outlined { font-size: 18px; margin-right: 8px; } .mdc-button--raised .material-symbols-outlined { color: var(--mdc-theme-on-primary); } .mdc-icon-button { color: var(--on-surface-var); } /* Outlined text field - MDC bakes light ink straight into these rules, and it does so through DEEP selectors. Restating a colour at lower specificity looks right in the stylesheet and does nothing in the browser: MDC's `.mdc-text-field:not(--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text` is (0,4,0), so a bare `.mdc-text-field-helper-text` (0,1,0) never won, and the helper line stayed near-black on the dark surface. So every override below MIRRORS MDC's own selector exactly. If you add a text field feature, copy its selector out of the bundle rather than guessing. */ .mdc-text-field--outlined { background: transparent; width: 100%; } .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input { color: var(--on-surface); caret-color: var(--g-blue); font-family: var(--font-text); } .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder { color: var(--on-surface-var); } /* resting outline */ .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { border-color: var(--outline); } /* hover outline - MDC guards this with :not(--focused), so match that too */ .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline__trailing { border-color: var(--on-surface-var); } .mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--focused .mdc-notched-outline__trailing { border-color: var(--g-blue) !important; } .mdc-floating-label { color: var(--on-surface-var) !important; font-family: var(--font-ui); } .mdc-text-field--focused .mdc-floating-label { color: var(--g-blue) !important; } /* the "e.g. Larry Page, Google LLC" line */ .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text { color: var(--on-surface-var); } /* scrim behind the modal drawer - MDC hard-codes rgba(0,0,0,.32) at (0,2,0) */ .mdc-drawer--modal + .mdc-drawer-scrim { background-color: var(--scrim); } /* Snackbar - replaces the browser's alert() for the CV form's message. MDC ships it with a #333 surface and a #bb86fc purple action (its own dark default), so all three colours are restated. Note the action's selector carries :not(:disabled), (0,2,0) - mirror it or the purple survives. */ .otso-snackbar.mdc-snackbar { z-index: 40; } /* above the CV overlay (30) */ .mdc-snackbar__surface { background-color: var(--snackbar-bg); } .mdc-snackbar__label { color: var(--snackbar-on); font-family: var(--font-text); font-size: 14px; } .mdc-snackbar__action:not(:disabled) { color: var(--snackbar-action); font-family: var(--font-ui); } .mdc-snackbar__action .mdc-button__ripple::before, .mdc-snackbar__action .mdc-button__ripple::after { background-color: var(--snackbar-action); background-color: var(--mdc-ripple-color, var(--snackbar-action)); } .mdc-list-item__primary-text { color: var(--on-surface); } .mdc-drawer .mdc-list-item--activated { color: var(--g-blue); background: rgba(var(--state-primary), .14); } /* ---------- 13. Responsive ----------------------------------------------- */ @media (max-width: 1279px) { .expertise-grid, .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { .otso-rail { display: none; } .otso-menu-btn { display: inline-flex; } .otso-content { margin-left: 0; padding-left: 24px; padding-right: 24px; } .otso-appbar-links { display: none; } .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { :root { --appbar-h: 56px; } .otso-content { padding-left: 16px; padding-right: 16px; padding-top: calc(var(--appbar-h) + 16px); } .otso-section { padding: 32px 0; } .expertise-grid, .projects-grid, .contact-grid, .numbers, .highlights { grid-template-columns: minmax(0, 1fr); } .hero { padding-top: 24px; } .hero-logo img { max-width: 300px; } .cv-card { padding: 24px 20px; } .otso-footer { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .chip-set .otso-chip { opacity: 1; } }