/* ============================================================ Felipe Nespral — dark developer portfolio Three themes driven by [data-theme] on : terminal · editor · minimal Accent driven by --accent (set inline from tweaks). ============================================================ */ @font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('../fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('../fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; src: url('../fonts/jetbrains-mono-v24-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; src: url('../fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; src: url('../fonts/jetbrains-mono-v24-latin-800.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); } :root { --maxw: 1120px; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-display: "Space Grotesk", var(--font-mono); /* defaults (terminal) — overridden per theme below */ --bg: #07090a; --bg-elev: #0d1110; --bg-elev2: #111614; --fg: #d7e0d8; --fg-dim: #7d8c82; --fg-faint: #4a564e; --border: #1c2622; --accent: oklch(0.82 0.16 150); --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent); --radius: 6px; --display-font: var(--font-mono); --display-weight: 700; --display-spacing: -0.01em; } /* ---- Terminal ------------------------------------------------ */ html[data-theme="terminal"] { --bg: #06090a; --bg-elev: #0c1110; --bg-elev2: #111815; --fg: #d4e3d6; --fg-dim: #7a8c80; --fg-faint: #485349; --border: #1b2823; --display-font: var(--font-mono); --display-weight: 700; --display-spacing: 0; } /* ---- Editor -------------------------------------------------- */ html[data-theme="editor"] { --bg: #11141b; --bg-elev: #181c26; --bg-elev2: #1e2330; --fg: #c9d1e0; --fg-dim: #7e879b; --fg-faint: #4f5666; --border: #262c3a; --display-font: var(--font-mono); --display-weight: 700; --display-spacing: -0.005em; } /* ---- Minimal ------------------------------------------------- */ html[data-theme="minimal"] { --bg: #0b0b0c; --bg-elev: #121214; --bg-elev2: #161618; --fg: #e8e8ea; --fg-dim: #8a8a90; --fg-faint: #4d4d52; --border: #232326; --display-font: var(--font-display); --display-weight: 600; --display-spacing: -0.025em; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: hidden; } ::selection { background: var(--accent-soft); color: var(--fg); } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } /* scanlines — only terminal */ .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 9990; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px ); opacity: 0; mix-blend-mode: overlay; } html[data-theme="terminal"] .scanlines { opacity: 1; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .brand .path { color: var(--fg); } .brand .blink { color: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 13px; color: var(--fg-dim); transition: color .18s; position: relative; } .nav-links a::before { content: "/"; color: var(--fg-faint); margin-right: 4px; } .nav-links a:hover { color: var(--fg); } .lang-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 12px; font-weight: 600; } .lang-toggle a { background: transparent; color: var(--fg-dim); padding: 6px 11px; cursor: pointer; font-family: var(--font-mono); text-decoration: none; transition: all .15s; } .lang-toggle a.active { background: var(--accent); color: var(--bg); } .nav-links-wrap { display: flex; align-items: center; gap: 28px; } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; color: var(--fg-dim); } .nav-burger span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s, opacity .15s; transform-origin: center; } .nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-burger span:nth-child(2) { opacity: 0; } .nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ WINDOW CHROME (panels) ============================================================ */ .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .win-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-elev2); font-size: 12px; color: var(--fg-dim); } .win-dots { display: flex; gap: 7px; } .win-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; background: var(--fg-faint); } /* minimal: hide chrome entirely */ html[data-theme="minimal"] .win-bar { display: none; } html[data-theme="minimal"] .panel { background: transparent; border-color: var(--border); } .win-title { font-size: 12px; color: var(--fg-dim); } /* prompt symbol — terminal only */ .prompt { color: var(--accent); } html[data-theme="editor"] .prompt, html[data-theme="minimal"] .prompt { display: none; } /* line-number gutter — editor only */ .gutter { display: none; } html[data-theme="editor"] .gutter { display: block; color: var(--fg-faint); user-select: none; text-align: right; padding-right: 16px; min-width: 38px; border-right: 1px solid var(--border); margin-right: 18px; font-size: 13px; line-height: inherit; } /* ============================================================ SECTION SCAFFOLD ============================================================ */ section { padding: 96px 0; position: relative; } .sec-head { margin-bottom: 52px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); } .sec-title { font-family: var(--display-font); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); font-size: clamp(30px, 4vw, 46px); line-height: 1.05; margin: 0 0 14px; } .sec-sub { color: var(--fg-dim); max-width: 56ch; font-size: 15px; } /* ============================================================ HERO ============================================================ */ .hero { padding-top: 64px; padding-bottom: 88px; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } .hero-status { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--fg-dim); margin-bottom: 26px; border: 1px solid var(--border); border-radius: 100px; padding: 5px 13px; } .hero-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero-kicker { font-size: 13px; color: var(--accent); margin-bottom: 18px; letter-spacing: 0.02em; } .hero-title { font-family: var(--display-font); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); font-size: clamp(34px, 5vw, 60px); line-height: 1.12; margin: 0 0 26px; text-wrap: balance; } .hero-title .line { display: block; } .hero-title .line.accent { color: var(--accent); } html[data-theme="minimal"] .hero-title .line.accent { color: var(--fg); } html[data-theme="minimal"] .hero-title .line.accent::after { content: ""; display: inline-block; width: 0.5em; } .hero-body { color: var(--fg-dim); font-size: 16px; max-width: 50ch; margin: 0 0 34px; line-height: 1.7; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; } .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; padding: 13px 22px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--fg); transition: all .18s; } .btn .arr { color: var(--accent); transition: transform .18s; } .btn:hover .arr { transform: translateX(3px); } .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-primary .arr { color: var(--bg); } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost:hover { border-color: var(--accent); color: var(--fg); } .metrics { display: flex; gap: 38px; flex-wrap: wrap; } .metric .val { font-family: var(--display-font); font-weight: var(--display-weight); font-size: 30px; color: var(--fg); line-height: 1; } .metric .lbl { font-size: 12px; color: var(--fg-dim); margin-top: 7px; } /* hero image */ .hero-img-body { padding: 0; } .img-slot { position: relative; width: 100%; background: repeating-linear-gradient(45deg, var(--bg-elev2) 0px, var(--bg-elev2) 11px, transparent 11px, transparent 22px); display: flex; align-items: center; justify-content: center; min-height: 320px; color: var(--fg-faint); } .img-slot .note { font-size: 12px; color: var(--fg-dim); background: var(--bg); border: 1px dashed var(--border); padding: 7px 13px; border-radius: 4px; } .img-slot .note::before { content: "[img] "; color: var(--fg-faint); } /* ============================================================ SERVICES ============================================================ */ .svc-list { display: flex; flex-direction: column; gap: 26px; } .svc { display: grid; grid-template-columns: 1fr 0.78fr; gap: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .2s; } .svc:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); } .svc:nth-child(even) { grid-template-columns: 0.78fr 1fr; } .svc:nth-child(even) .svc-media { order: -1; } .svc-body { padding: 34px 36px; display: flex; flex-direction: column; } .svc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .svc-n { font-size: 13px; color: var(--fg-faint); font-weight: 700; } .svc-tag { font-size: 12px; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: 3px 9px; border-radius: 4px; } .svc-tag::before { content: "#"; opacity: .6; } html[data-theme="editor"] .svc-tag::before { content: "<"; } html[data-theme="editor"] .svc-tag::after { content: ">"; opacity:.6;} .svc h3 { font-family: var(--display-font); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); font-size: 26px; margin: 0 0 6px; } .svc .svc-sub { color: var(--accent); font-size: 14px; margin-bottom: 16px; } html[data-theme="minimal"] .svc .svc-sub { color: var(--fg-dim); } .svc p { color: var(--fg-dim); font-size: 14.5px; margin: 0; line-height: 1.7; } .svc-media { min-height: 100%; } .svc-media .img-slot { min-height: 100%; height: 100%; } /* ============================================================ TESTIMONIALS ============================================================ */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .quote { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 26px 22px; display: flex; flex-direction: column; transition: border-color .2s; } .quote:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); } .quote:first-child { grid-column: span 2; } .quote:nth-child(4) { grid-column: span 2; } .quote:nth-child(5) { grid-column: span 2; } .quote .mark { color: var(--accent); font-size: 22px; line-height: 1; margin-bottom: 12px; } .quote p { color: var(--fg); font-size: 14.5px; line-height: 1.65; margin: 0 0 20px; flex: 1; } .quote .who { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--border); } .quote .who .nm { font-size: 14px; font-weight: 600; } .quote .who .ro { font-size: 12px; color: var(--fg-dim); } .quote .who .nm::before { content: "› "; color: var(--accent); } /* ============================================================ CTA ============================================================ */ .cta { text-align: center; } .cta-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); padding: 64px 40px; position: relative; overflow: hidden; } .cta-card .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 120%, var(--accent-soft), transparent 60%); } .cta .promptline { font-size: 13px; color: var(--fg-dim); margin-bottom: 22px; } .cta .promptline .prompt { margin-right: 8px; } .cta h2 { font-family: var(--display-font); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); font-size: clamp(30px, 4.4vw, 50px); margin: 0 0 14px; position: relative; } .cta .cta-sub { color: var(--fg-dim); margin: 0 0 30px; position: relative; } .cta .cta-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; } .cta .email { display: inline-flex; align-items: center; font-size: 13px; color: var(--fg-dim); margin-top: 24px; position: relative; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--border); padding: 30px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg-dim); flex-wrap: wrap; gap: 12px; } /* ── Latest post ── */ .latest-post { padding: 80px 0; border-top: 1px solid var(--border); } .latest-post-inner { display: flex; align-items: center; gap: 48px; } .latest-post-text { flex: 1; } .latest-post-text h2 { font-family: var(--display-font); font-weight: var(--display-weight); font-size: clamp(20px, 3vw, 32px); line-height: 1.2; margin: 12px 0 16px; } .latest-post-text p { color: var(--fg-dim); font-size: 15px; line-height: 1.7; margin: 0 0 24px; } .latest-post-img { flex-shrink: 0; width: 280px; height: 280px; border-radius: var(--radius); overflow: hidden; display: block; border: 1px solid var(--border); transition: border-color .2s; } .latest-post-img:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); } .latest-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 680px) { .latest-post-inner { flex-direction: column; } .latest-post-img { width: 100%; height: auto; aspect-ratio: 1/1; } } .footer .l { display: flex; align-items: center; gap: 8px; } .footer-social { display: flex; align-items: center; gap: 14px; } .footer-social a { color: var(--fg-dim); transition: color .15s; display: flex; } .footer-social a:hover { color: var(--accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-img-body { order: -1; } .svc, .svc:nth-child(even) { grid-template-columns: 1fr; } .svc:nth-child(even) .svc-media { order: 0; } .svc-media .img-slot { min-height: 200px; } .quotes { grid-template-columns: 1fr; } .quote:first-child, .quote:nth-child(4), .quote:nth-child(5) { grid-column: span 1; } .nav-links { display: none; } .nav { position: fixed; top: 0; left: 0; right: 0; } body { padding-top: 60px; } .nav-burger { display: flex; } .nav-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0; gap: 0; z-index: 200; } .nav-open .nav-links a { padding: 14px 24px; border-bottom: 1px solid var(--border); font-size: 14px; } .nav-open .nav-links a:last-child { border-bottom: 0; } } @media (max-width: 560px) { .container { padding: 0 16px; } section { padding: 56px 0; } .hero { padding-top: 40px; padding-bottom: 20px; } .metrics { gap: 20px; } .metric{ flex: 1;text-align: center; } .metric .val { font-size: 26px; } .hero-cta { flex-direction: column; align-items: flex-start; } .btn { width: 100%; justify-content: center; } .sec-head { margin-bottom: 36px; } .cta-card { padding: 40px 24px; } .cta .email { font-size: 12px; word-break: break-all; text-align: center; } .footer { flex-direction: column; align-items: center; gap: 6px; } .nav-links-wrap { gap: 16px; } } /* ============================================================ CODE MOCKUPS (replace photo placeholders) ============================================================ */ .mock { height: 100%; min-height: 320px; width: 100%; background: var(--bg-elev2); display: flex; flex-direction: column; font-size: 13px; line-height: 1.7; overflow: hidden; } .svc-media .mock { min-height: 100%; } /* syntax tokens */ .tk-key { color: var(--accent); } .tk-str { color: oklch(0.82 0.11 78); } .tk-tag { color: oklch(0.78 0.1 220); } .tk-num { color: oklch(0.78 0.12 30); } .tk-com { color: var(--fg-faint); } .tk-dim { color: var(--fg-dim); } .tk-fn { color: oklch(0.8 0.11 300); } /* mock header strip (filename / title) */ .mock-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 55%, var(--bg-elev2)); font-size: 12px; color: var(--fg-dim); flex: 0 0 auto; } .mock-bar .fz { color: var(--accent); } .mock-bar .grow { flex: 1; } .mock-bar .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); display: inline-block; } /* ---- Terminal (hero) ---- */ .mock-term { padding: 18px 20px; gap: 2px; justify-content: flex-start; } .mock-term .ln { white-space: pre-wrap; } .mock-term .pr { color: var(--accent); } .mock-term .cur { display: inline-block; width: 9px; height: 1.05em; vertical-align: -2px; background: var(--accent); margin-left: 3px; animation: blink 1.1s steps(1) infinite; } .mock-term .out { color: var(--fg); } .mock-term .muted { color: var(--fg-dim); } .mock-term .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; } .mock-term .chip { font-size: 11px; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: 2px 8px; border-radius: 3px; } /* ---- Code editor ---- */ .mock-code { padding: 0; } .mock-code .rows { display: flex; padding: 14px 0; } .mock-code .gut { text-align: right; color: var(--fg-faint); user-select: none; padding: 0 14px; border-right: 1px solid var(--border); } .mock-code .src { padding: 0 16px; white-space: pre; overflow: hidden; } .mock-code .ind { padding-left: 2ch; } .mock-code .ind2 { padding-left: 4ch; } /* ---- WordPress admin ---- */ .mock-wp { flex-direction: row; } .mock-wp .side { flex: 0 0 38%; background: color-mix(in oklab, var(--bg) 60%, var(--bg-elev2)); border-right: 1px solid var(--border); padding: 14px 0; display: flex; flex-direction: column; gap: 2px; } .mock-wp .si { display: flex; align-items: center; gap: 9px; padding: 7px 14px; font-size: 12px; color: var(--fg-dim); } .mock-wp .si.on { color: var(--accent); background: var(--accent-soft); border-left: 2px solid var(--accent); } .mock-wp .si .ic { width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .5; flex: 0 0 auto; } .mock-wp .main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 11px; } .mock-wp .mh { font-size: 13px; color: var(--fg); font-weight: 600; } .mock-wp .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .mock-wp .card { border: 1px solid var(--border); border-radius: 4px; padding: 11px; background: var(--bg-elev); } .mock-wp .card .k { font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .08em; } .mock-wp .card .v { font-size: 20px; color: var(--accent); font-weight: 700; margin-top: 4px; } .mock-wp .bar { height: 7px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 8px; } .mock-wp .bar i { display: block; height: 100%; width: 92%; background: var(--accent); } .mock-term .ln-sep { margin-top: 6px; } /* ---- Automation flow ---- */ .mock-flow { padding: 22px 18px; justify-content: center; gap: 0; } .mock-flow .row { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; } .mock-flow .node { border: 1px solid var(--border); border-radius: 5px; padding: 9px 11px; background: var(--bg-elev); text-align: center; min-width: 0; flex: 1; } .mock-flow .node .t { font-size: 11px; color: var(--fg); } .mock-flow .node .s { font-size: 10px; color: var(--fg-dim); margin-top: 2px; } .mock-flow .node.acc { border-color: var(--accent); color: var(--accent); } .mock-flow .node.acc .t { color: var(--accent); } .mock-flow .arr { color: var(--fg-faint); padding: 0 9px; flex: 0 0 auto; } .mock-flow .down { display: flex; justify-content: center; color: var(--fg-faint); padding: 6px 0; } /* ---- Analytics chart ---- */ .mock-chart { padding: 18px 20px; gap: 14px; justify-content: flex-start; } .mock-chart .stats { display: flex; gap: 20px; } .mock-chart .stat .k { font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .08em; } .mock-chart .stat .v { font-size: 22px; font-weight: 700; color: var(--accent); white-space: nowrap; } .mock-chart .stat .v .up { font-size: 11px; color: var(--fg-dim); margin-left: 5px; } .mock-chart .bars { flex: 1; display: flex; align-items: flex-end; gap: 9px; border-bottom: 1px solid var(--border); padding-bottom: 0; min-height: 120px; } .mock-chart .bars b { flex: 1; background: linear-gradient(to top, var(--accent-soft), var(--accent)); border-radius: 3px 3px 0 0; display: block; opacity: .9; } .mock-chart .xaxis { display: flex; gap: 9px; } .mock-chart .xaxis span { flex: 1; text-align: center; font-size: 10px; color: var(--fg-faint); } @media (max-width: 900px) { .mock, .svc-media .mock { min-height: 240px; } }