/* ========================================================= Muhammad Rizki Fahreza — Portfolio & CV Pure CSS. Dark/Light theming via [data-theme] on . ========================================================= */ /* ---------- Theme tokens ---------- */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius: 16px; --radius-sm: 10px; --maxw: 1120px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .12); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .45); --ease: cubic-bezier(.22, 1, .36, 1); } /* Dark (default) */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0e16; --bg-2: #0e1420; --surface: rgba(255, 255, 255, .028); --surface-2: rgba(255, 255, 255, .05); --text: #e7edf5; --heading: #f5f8fc; --muted: #8a97ab; --faint: #5c6b82; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --accent: #38bdf8; --accent-2: #34d399; --accent-3: #a78bfa; --accent-contrast: #04121c; --glow: rgba(56, 189, 248, .18); --grid-line: rgba(255, 255, 255, .035); } /* Light */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f8fc; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1f5fb; --text: #253145; --heading: #0d1526; --muted: #55617a; --faint: #7a869c; --border: rgba(13, 21, 38, .1); --border-strong: rgba(13, 21, 38, .18); --accent: #0284c7; --accent-2: #059669; --accent-3: #7c3aed; --accent-contrast: #ffffff; --glow: rgba(2, 132, 199, .12); --grid-line: rgba(13, 21, 38, .04); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100vh; position: relative; } /* Ambient background: dot grid + soft glows */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60vw 60vw at 82% -8%, var(--glow), transparent 60%), radial-gradient(50vw 50vw at -10% 15%, color-mix(in srgb, var(--accent-3) 22%, transparent), transparent 60%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), var(--bg); background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px, 100% 100%; pointer-events: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--heading); line-height: 1.15; margin: 0; letter-spacing: -.02em; } p { margin: 0; } ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--heading); } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .mono { font-family: var(--font-mono); } .accent { color: var(--accent); } /* Language visibility handled by JS text-swap; no CSS needed. */ /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { font-family: var(--font-mono); font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--accent-contrast); background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 18px -8px var(--glow); flex: none; } .brand-name { font-weight: 650; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav { display: flex; align-items: center; gap: 6px; } .nav-link { font-size: .92rem; font-weight: 550; color: var(--muted); padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; } .nav-link:hover { color: var(--heading); background: var(--surface-2); } .nav-link.active { color: var(--accent); } .controls { display: flex; align-items: center; gap: 8px; margin-left: 6px; } .btn-icon { cursor: pointer; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; height: 38px; min-width: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s var(--ease); } .btn-icon:hover { color: var(--heading); border-color: var(--border-strong); transform: translateY(-1px); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; padding: 12px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: all .22s var(--ease); white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); box-shadow: 0 12px 30px -12px var(--glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px var(--glow); } .btn-ghost { background: var(--surface); color: var(--heading); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); } /* ---------- Sections ---------- */ .section { padding: 92px 0; } .section-head { margin-bottom: 44px; max-width: 720px; } .eyebrow { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; color: var(--accent); margin-bottom: 14px; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); } .section-head p { color: var(--muted); margin-top: 12px; font-size: 1.02rem; } /* ---------- Hero ---------- */ .hero { padding: clamp(56px, 9vw, 104px) 0 72px; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero-text h1 { font-size: clamp(2.3rem, 6vw, 3.7rem); margin: 14px 0 10px; background: linear-gradient(180deg, var(--heading), color-mix(in srgb, var(--heading) 62%, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-role { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600; color: var(--heading); min-height: 1.6em; } .hero-role .typed { color: var(--accent); font-family: var(--font-mono); } .hero-role .caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent-2); margin-left: 2px; vertical-align: -3px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-tagline { color: var(--muted); font-size: 1.06rem; margin: 20px 0 30px; max-width: 46ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: .9rem; } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 20%, transparent); } /* Terminal card */ .terminal { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--font-mono); font-size: .86rem; } .terminal-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .terminal-bar .tdot { width: 12px; height: 12px; border-radius: 50%; } .tdot.r { background: #ff5f57; } .tdot.y { background: #febc2e; } .tdot.g { background: #28c840; } .terminal-bar .tfile { margin-left: 8px; color: var(--faint); font-size: .8rem; } .terminal-body { padding: 20px; line-height: 1.85; } .terminal-body .ln { white-space: pre-wrap; word-break: break-word; } .c-com { color: var(--faint); } .c-key { color: var(--accent-3); } .c-str { color: var(--accent-2); } .c-fn { color: var(--accent); } .c-var { color: var(--text); } .c-prompt { color: var(--accent-2); } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px 20px; } .stat .num { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--heading); background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat .lbl { color: var(--muted); font-size: .86rem; margin-top: 4px; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; } .about-text p { color: var(--muted); margin-bottom: 16px; font-size: 1.04rem; } .about-text strong { color: var(--heading); font-weight: 650; } .about-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .about-card h3 { font-size: 1.05rem; margin-bottom: 16px; } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); font-size: .93rem; } .kv:first-of-type { border-top: none; } .kv .k { color: var(--muted); } .kv .v { color: var(--heading); font-weight: 600; text-align: right; } /* ---------- Stack ---------- */ .stack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .stack-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color .25s, transform .25s; } .stack-card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .stack-card h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .stack-card h3 .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: .95rem; } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-family: var(--font-mono); font-size: .82rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); padding: 7px 12px; border-radius: 999px; transition: all .2s; } .chip:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Projects ---------- */ .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .project { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; } .project::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); opacity: 0; transition: opacity .3s; } .project:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .project:hover::after { opacity: 1; } .project.featured { grid-column: span 2; } .project-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .project .status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .71rem; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .project .status .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .status-live { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); } .status-live .sdot { background: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent); } .status-ongoing { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .status-ongoing .sdot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .status-dev { color: #f0a52e; border-color: color-mix(in srgb, #f0a52e 45%, transparent); } .status-dev .sdot { background: #f0a52e; box-shadow: 0 0 0 3px color-mix(in srgb, #f0a52e 22%, transparent); } .project .tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); padding: 4px 9px; border-radius: 999px; } .project .role { font-family: var(--font-mono); font-size: .78rem; color: var(--faint); } .project h3 { font-size: 1.22rem; margin-bottom: 10px; } .project p { color: var(--muted); font-size: .97rem; margin-bottom: 18px; } .project .stackline { display: flex; flex-wrap: wrap; gap: 7px; } .project .stackline .t { font-family: var(--font-mono); font-size: .76rem; color: var(--faint); background: var(--surface-2); padding: 4px 9px; border-radius: 7px; } /* ---------- Timeline ---------- */ .timeline { position: relative; margin-left: 8px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), transparent); } .tl-item { position: relative; padding: 0 0 30px 38px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); } .tl-item .when { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); } .tl-item h3 { font-size: 1.1rem; margin: 6px 0 2px; } .tl-item .org { color: var(--heading); font-weight: 600; } .tl-item .place { color: var(--faint); font-size: .87rem; } .tl-item p { color: var(--muted); font-size: .96rem; margin-top: 8px; } /* ---------- Contact ---------- */ .contact-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(30px, 5vw, 56px); text-align: center; } .contact-wrap h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); } .contact-wrap p { color: var(--muted); margin: 14px auto 30px; max-width: 54ch; } .contact-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .clink { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); padding: 12px 18px; border-radius: 12px; font-weight: 550; color: var(--heading); transition: all .2s var(--ease); } .clink:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .clink svg { width: 18px; height: 18px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 34px 0; margin-top: 40px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; color: var(--muted); font-size: .88rem; } .footer-inner .mono { color: var(--faint); font-size: .82rem; } /* ========================================================= CV / RESUME PAGE ========================================================= */ .cv-hero { padding: 60px 0 12px; } .cv-hero-inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; } .cv-hero .eyebrow { margin-bottom: 8px; } .cv-hero h1 { font-size: clamp(2rem, 5vw, 3rem); } .cv-hero .subtitle { color: var(--muted); margin-top: 8px; max-width: 60ch; } .cv-actions { display: flex; gap: 12px; flex-wrap: wrap; } .cv-layout { display: grid; grid-template-columns: 320px 1fr; gap: 34px; padding: 40px 0 30px; align-items: start; } .cv-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 20px; } .cv-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .cv-block h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-family: var(--font-mono); margin-bottom: 16px; } .cv-contact-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: .92rem; } .cv-contact-item svg { width: 17px; height: 17px; color: var(--accent-2); flex: none; margin-top: 3px; } .cv-contact-item a, .cv-contact-item span { color: var(--text); word-break: break-word; } .cv-contact-item a:hover { color: var(--accent); } .cv-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .cv-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .92rem; } .cv-list li:first-child { border-top: none; } .cv-list li .meta { color: var(--faint); font-size: .82rem; } .cv-list li .name { color: var(--heading); font-weight: 550; } .cv-list li .sub { color: var(--muted); font-size: .85rem; } .edu-item { display: flex; flex-direction: column; } .bar-skill { margin-bottom: 14px; } .bar-skill .top { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 6px; } .bar-skill .top .lvl { color: var(--muted); font-family: var(--font-mono); font-size: .78rem; } .bar-track { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 1s var(--ease); } .cv-main { display: flex; flex-direction: column; gap: 30px; } .cv-section-title { font-size: 1.3rem; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .cv-section-title .idx { font-family: var(--font-mono); color: var(--accent); font-size: .95rem; } .cv-summary p { color: var(--muted); margin-bottom: 14px; font-size: 1.02rem; } .xp { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 18px; } .xp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; } .xp-head h4 { font-size: 1.14rem; } .xp-head .when { font-family: var(--font-mono); font-size: .82rem; color: var(--accent); white-space: nowrap; } .xp .org { color: var(--heading); font-weight: 600; margin-top: 3px; } .xp .place { color: var(--faint); font-size: .86rem; margin-top: 2px; } .xp .desc { color: var(--muted); margin-top: 14px; font-size: .97rem; } .xp .sub-label { color: var(--heading); font-weight: 650; margin-top: 16px; font-size: .95rem; } .xp ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .xp ul li { position: relative; padding-left: 22px; color: var(--muted); font-size: .95rem; } .xp ul li::before { content: "▹"; position: absolute; left: 0; color: var(--accent-2); font-weight: 700; } .xp ul li strong { color: var(--heading); font-weight: 600; } .noscript-note { max-width: var(--maxw); margin: 40px auto; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .about-grid { grid-template-columns: 1fr; } .cv-layout { grid-template-columns: 1fr; } .cv-aside { position: static; } } @media (max-width: 760px) { .section { padding: 68px 0; } .stats { grid-template-columns: repeat(2, 1fr); } .stack-grid, .projects-grid { grid-template-columns: 1fr; } .project.featured { grid-column: span 1; } .brand-name { display: none; } .nav-link { padding: 8px 9px; font-size: .88rem; } } @media (max-width: 420px) { .container { padding: 0 16px; } .stats { grid-template-columns: 1fr 1fr; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } } /* ---------- Print (CV) — ATS-friendly: single column, plain text ---------- */ @media print { @page { margin: 14mm 15mm; } /* Hide everything non-essential / decorative */ body::before, .site-header, .site-footer, .cv-actions, .controls, .noscript-note, .cv-contact-item svg, .status .sdot, .cv-section-title .idx { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 10.5pt; line-height: 1.45; } .container { max-width: none; padding: 0; } /* Header block */ .cv-hero { padding: 0 0 4pt !important; } .cv-hero .eyebrow { display: none; } .cv-hero-inner { display: block !important; } .cv-hero h1 { font-size: 21pt; color: #000 !important; -webkit-text-fill-color: #000; background: none; } .cv-hero .subtitle { color: #222 !important; margin-top: 4pt; } /* Linearize to ONE column (ATS parsers read top-to-bottom) */ .cv-layout { display: block !important; padding: 8pt 0 0 !important; } .cv-aside { position: static !important; display: block; gap: 0; } .cv-main { display: block !important; gap: 0 !important; } .cv-block, .xp { background: #fff !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 11pt !important; break-inside: avoid; } /* Standard section headings ATS understands */ .cv-block h3, .cv-section-title { color: #000 !important; font-family: var(--font-sans) !important; font-size: 11.5pt !important; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; border-bottom: 1px solid #000 !important; padding-bottom: 3pt; margin-bottom: 6pt; } /* Body text -> black, selectable */ .cv-summary p, .xp .desc, .xp ul li, .cv-list li, .cv-contact-item, .kv { color: #111 !important; font-size: 10.5pt; } .xp-head h4 { font-size: 12pt; color: #000 !important; } .xp .org, .xp .sub-label, .cv-list .name, .edu-item .name { color: #000 !important; font-weight: 700; } .xp-head .when, .cv-list .meta, .xp .place, .edu-item .sub, .cv-list .sub { color: #333 !important; -webkit-text-fill-color: #333; font-family: var(--font-sans) !important; } /* Skills as a comma-friendly plain list of keywords */ .chip { background: #fff !important; border: none !important; color: #000 !important; font-family: var(--font-sans) !important; font-size: 10.5pt; padding: 0 6pt 0 0; border-radius: 0; position: relative; } .chips { gap: 0 2pt; } /* Force ALL bold/link/contact text fully black (fix faint from dark theme) */ .cv-contact-item a, .cv-contact-item span, .xp ul li strong, .cv-summary p strong, .about-text strong, .xp ul li, .cv-summary p { color: #000 !important; -webkit-text-fill-color: #000 !important; } .xp ul li::before { color: #000 !important; content: "•"; } a { color: #000 !important; text-decoration: none; } .reveal { opacity: 1 !important; transform: none !important; } }