@import "./tokens.css"; /* ============================================================ Maintenance — three service-contract stubs. Related to the package plates but distinct: a perforated hairline motif (dashed separator, "tear-off stub" feel) instead of riveted corners. ============================================================ */ #maintenance { padding: 4rem 1.25rem 4.5rem; border-top: 1px solid var(--hairline); } .maintenance-inner { max-width: 1200px; margin: 0 auto; } #maintenance h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2rem); text-align: center; margin: 0 0 2.5rem; color: var(--ink); } .stubs { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 900px) { .stubs { grid-template-columns: repeat(3, 1fr); align-items: start; } } .stub { position: relative; border: 1px solid var(--hairline); border-radius: 3px; padding: 1.75rem 1.5rem 1.5rem; background-color: var(--plate-bg); display: flex; flex-direction: column; gap: 0.75rem; } .stub-featured { border-top: 2px solid var(--accent); padding-top: calc(1.75rem - 1px); } /* ============================================================ Scroll-reveal — quiet, one-by-one entrance driven by reveal.js. Each .stub is observed INDIVIDUALLY (IntersectionObserver, threshold 0.2) and gets its own ".in" class the moment IT enters the viewport, so scrolling reveals stub 1, then 2, then 3 in natural reading order — that scroll order is itself the stagger, so no nth-child transition-delay is needed (mirrors packages.css' .plate reveal; same reasoning). One-shot: reveal.js unobserves each element once revealed. Progressive enhancement: .stub is fully visible by default. It is only ever hidden pre-reveal when reveal.js has actually run and tagged — if that script 404s, is blocked, or throws (old browser, no IntersectionObserver), the class is never added and pricing content stays visible. ============================================================ */ html.js-reveal #maintenance .stub { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.2, .9, .25, 1.05), transform 600ms cubic-bezier(.2, .9, .25, 1.05); } html.js-reveal #maintenance .stub.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-reveal #maintenance .stub, html.js-reveal #maintenance .stub.in { opacity: 1; transform: none; transition: none; } } .stub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .stub-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--muted); opacity: 0.6; font-variant-numeric: tabular-nums; } /* Hand-drawn technical icons — mirror-safe on purpose (direction-neutral shapes) so they must NEVER flip under RTL, unlike text content. */ .stub-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--accent-ink); } .stub h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); margin: 0; } .stub-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; flex-grow: 1; } .stub-bullets li { position: relative; padding-inline-start: 1.1em; font-family: var(--font-body); color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .stub-bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background-color: var(--accent-ink); opacity: 0.7; } /* perforated-edge motif — a dashed hairline "tear line" running the width of the stub, evoking a tear-off service-contract ticket. Small punched dots sit on the line at each end (decorative hardware; fixed physical position, must not mirror under RTL). */ .stub-perf { position: relative; height: 1px; margin: 0.25rem 0; background-image: repeating-linear-gradient( to right, var(--hairline) 0, var(--hairline) 4px, transparent 4px, transparent 9px ); } .stub-perf::before, .stub-perf::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background-color: var(--plate-bg); border: 1px solid var(--hairline); transform: translateY(-50%); } .stub-perf::before { left: -1.5rem; } .stub-perf::after { right: -1.5rem; } .stub-price { display: flex; align-items: baseline; gap: 0.35rem; } .stub-price .price-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--accent-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .stub-price .price-currency { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--accent-ink); opacity: 0.85; } .stub-price .price-period { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); opacity: 0.75; } .maintenance-note { text-align: center; margin-top: 2rem; font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); opacity: 0.6; font-style: italic; } /* ---- mobile compaction — matches the packages plates' tightening ------ */ @media (max-width: 479px) { #maintenance { padding: 2rem 1rem 2.25rem; } #maintenance h2 { margin-bottom: 1.1rem; } .stubs { gap: 0.7rem; } .stub { padding: 0.9rem 0.9rem 0.8rem; gap: 0.45rem; } .stub-featured { padding-top: calc(0.9rem - 1px); } .stub-num { font-size: 0.65rem; } .stub-icon { width: 18px; height: 18px; } .stub h3 { font-size: 1.05rem; } .stub-bullets { gap: 0.3rem; } .stub-bullets li { font-size: 0.88rem; line-height: 1.35; } .stub-bullets li::before { top: 0.55em; } .stub-price .price-num { font-size: 1.5rem; } .maintenance-note { margin-top: 1rem; } } /* ============================================================ Work — placeholder plates. Real case studies pending client permission; these two stubs must read as an intentional, designed "coming soon" state, not a broken/empty section. ============================================================ */ #work { padding: 4rem 1.25rem 4.5rem; border-top: 1px solid var(--hairline); } .work-inner { max-width: 1200px; margin: 0 auto; } #work h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2rem); text-align: center; margin: 0 0 2.5rem; color: var(--ink); } .work-plates { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 700px) { .work-plates { grid-template-columns: repeat(2, 1fr); } } .work-plate-placeholder { position: relative; min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; border: 1px dashed var(--hairline); border-radius: 3px; background: repeating-linear-gradient( 135deg, rgba(26, 26, 28, 0.04) 0px, rgba(26, 26, 28, 0.04) 8px, transparent 8px, transparent 16px ); } .work-plate-tag { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; color: var(--muted); opacity: 0.7; } .work-note { text-align: center; margin-top: 1.75rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); opacity: 0.75; } /* ============================================================ Footer additions — WhatsApp link + Made-in-UAE line. ============================================================ */ footer { flex-direction: column; gap: 0.6rem; padding: 2.5rem 1rem; } .footer-whatsapp { color: var(--accent-ink); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; transition: opacity 200ms ease; } .footer-whatsapp:hover { opacity: 0.8; } .footer-uae { font-family: var(--font-body); font-size: 0.75rem; color: var(--muted); opacity: 0.6; letter-spacing: 0.02em; }