/* ========================================================================== Race Car Scans: theme styles (on top of Kadence) Look: dark header and hero, Race Cars For You orange, Barlow type. ========================================================================== */ /* Kadence's color palette, remapped. html:root beats Kadence's own :root. */ html:root { --global-palette1: #f26a1b; /* accent (buttons, links) */ --global-palette2: #d9560c; /* accent hover */ --global-palette3: #15161a; /* headings */ --global-palette4: #2b2d33; /* strong text */ --global-palette5: #4a4d55; /* body text */ --global-palette6: #6b6f78; /* muted */ --global-palette7: #ececee; /* subtle backgrounds */ --global-palette8: #e4e5e8; /* page background */ --global-palette9: #ffffff; /* cards */ --global-body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --global-heading-font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; --rcst-ink: #15161a; --rcst-muted: #5d6068; --rcst-line: #d9dadf; --rcst-dark: #0c0d0f; --rcst-dark-2: #15171b; --rcst-dark-line: #26292f; --rcst-accent: #f26a1b; --rcst-accent-ink: #b8490a; --rcst-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; --rcst-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; } body { font-family: var(--global-body-font-family); background: var(--global-palette8); } h1, h2, h3, .entry-title, .site-title { font-family: var(--rcst-display) !important; font-style: italic; font-weight: 800 !important; letter-spacing: .01em; line-height: 1.02; text-wrap: balance; } a { color: var(--rcst-accent-ink); } a:hover { color: var(--rcst-accent); } :focus-visible { outline: 2px solid var(--rcst-accent); outline-offset: 2px; } /* ---------- Header ------------------------------------------------------- */ #masthead, #masthead .site-header-row-container-inner, #masthead .site-main-header-inner-wrap, #mobile-header .site-header-row-container-inner { background: var(--rcst-dark) !important; border-bottom: 1px solid #22252a; } #masthead .site-branding a.brand { display: flex; align-items: center; gap: 14px; } #masthead .custom-logo, #mobile-header .custom-logo { max-height: 58px !important; width: auto !important; } #masthead .site-title, #mobile-header .site-title { color: #fff !important; font-size: 23px !important; text-transform: none; font-weight: 900 !important; white-space: nowrap; margin: 0; } #masthead .site-title::after, #mobile-header .site-title::after { content: none; } #masthead .site-description { display: none; } #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { color: #a4a8b0 !important; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding-left: .7em; padding-right: .7em; } #masthead .header-navigation .menu > li > a:hover, #masthead .header-navigation .menu > li.current-menu-item > a { color: #fff !important; } #masthead .header-navigation .menu > li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--rcst-accent); } #masthead .header-navigation .menu > li.rcst-menu-cta > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a { background: var(--rcst-accent); color: #1a0d04 !important; border-radius: 4px; padding: .55em 1em; margin-left: .6em; line-height: 1.2; } #masthead .header-navigation .menu > li.rcst-menu-cta > a:hover, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a:hover { background: #ff8a45; color: #1a0d04 !important; } #mobile-header .menu-toggle-open, #mobile-header .menu-toggle-open .menu-toggle-icon { color: #fff !important; } .drawer-inner { background: var(--rcst-dark) !important; } .drawer-inner .menu a, .drawer-inner a { color: #e6e7ea !important; } /* ---------- Shared bits -------------------------------------------------- */ .rcst-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; } .rcst-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rcst-accent); } .rcst-lede { color: var(--rcst-muted); font-size: 17px; max-width: 56ch; } .rcst-muted { color: var(--rcst-muted); } .rcst-btn, .rcs-btn { display: inline-block; background: var(--rcst-accent); color: #1a0d04 !important; border: 1px solid var(--rcst-accent); border-radius: 5px; padding: 12px 18px; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; line-height: 1.2; } .rcst-btn:hover, .rcs-btn:hover { background: #ff8a45; border-color: #ff8a45; } .rcst-btn--ghost, .rcs-btn--ghost { background: transparent; color: var(--rcst-ink) !important; border-color: var(--rcst-line); } .rcst-btn--ghost:hover, .rcs-btn--ghost:hover { background: transparent; border-color: var(--rcst-accent); } .rcst-btn--small { padding: 9px 14px; font-size: 13px; } /* ---------- Home: hero --------------------------------------------------- */ .rcst-home, .rcst-archive { margin-top: 0; } .rcst-hero { background: radial-gradient(110% 90% at 75% 40%, #1b1d22 0%, var(--rcst-dark) 62%); color: #f1f2f4; } .rcst-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding-block: 52px 44px; } .rcst-hero__text { container-type: inline-size; } .rcst-hero h1 { color: #fff; font-size: clamp(40px, 13.6cqi, 110px); margin: 12px 0 18px; white-space: nowrap; } .rcst-hero h1 em { display: block; color: var(--rcst-accent); font-style: italic; font-size: .6em; line-height: 1.05; margin-top: .05em; } .rcst-hero h1 br { display: none; } .rcst-hero .rcst-lede { color: #a3a8b1; } .rcst-search { display: flex; max-width: 540px; margin: 22px 0 14px; background: #fff; border-radius: 5px; overflow: hidden; } .rcst-search input[type=search] { flex: 1; min-width: 0; border: 0; padding: 13px 14px; font: inherit; color: #15161a; background: #fff; border-radius: 0; } .rcst-search button { border: 0; border-radius: 0; background: var(--rcst-accent); color: #1a0d04; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 0 20px; cursor: pointer; } .rcst-ctas { display: flex; gap: 10px; flex-wrap: wrap; } .rcst-hero .rcst-btn--ghost { color: #f1f2f4 !important; border-color: #3a3d44; } .rcst-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; color: #a4a8b0; font-size: 14px; } .rcst-stats b { color: #fff; font-family: var(--rcst-mono); font-weight: 600; } .rcst-hero__model { position: relative; } .rcst-hero__model .rcs-viewer { margin: 0; background: transparent; } .rcst-hero__model .rcs-viewer canvas { aspect-ratio: 16 / 11; } .rcst-hero__model .rcs-viewer figcaption { left: auto; right: 0; bottom: -2px; } .rcst-hero__link { display: inline-block; margin-top: 10px; color: #ff9a5c; font-weight: 600; font-size: 14px; } /* ---------- Home: band + sections --------------------------------------- */ .rcst-band { background: #fff; border-bottom: 1px solid var(--rcst-line); } .rcst-band__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 28px; padding-block: 34px; align-items: start; } .rcst-band h2 { font-size: clamp(28px, 3vw, 36px); margin: 6px 0 0; } .rcst-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; } .rcst-why li { border-top: 2px solid var(--rcst-accent); padding-top: 10px; color: var(--rcst-muted); font-size: 15px; } .rcst-why b { display: block; color: var(--rcst-ink); font-size: 16px; margin-bottom: 2px; } .rcst-section { padding-block: 40px; } .rcst-section--alt { background: #d9dade; } .rcst-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .rcst-section__head h2 { font-size: 32px; margin: 0; } .rcst-section__head a { font-weight: 600; font-size: 14px; } .rcst-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .rcst-panel { background: #fff; border: 1px solid var(--rcst-line); border-radius: 8px; padding: 22px; } .rcst-list { list-style: none; margin: 0; padding: 0; } .rcst-list li { padding: 9px 0; border-top: 1px solid var(--rcst-line); } .rcst-list li:first-child { border-top: 0; } .rcst-list a { color: var(--rcst-ink); font-weight: 600; } .rcst-rcfy { background: var(--rcst-dark); color: #a3a8b1; } .rcst-rcfy__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 30px; flex-wrap: wrap; } .rcst-rcfy p { margin: 0; max-width: 62ch; } .rcst-rcfy b { color: #fff; } .rcst-rcfy .rcst-btn--ghost { color: #f1f2f4 !important; border-color: #3a3d44; } /* ---------- Archive head ------------------------------------------------ */ .rcst-pagehead { background: radial-gradient(110% 120% at 80% 20%, #1b1d22 0%, var(--rcst-dark) 60%); color: #f1f2f4; padding-block: 40px 34px; } .rcst-pagehead h1 { color: #fff; font-size: clamp(38px, 5vw, 58px); margin: 8px 0 8px; } .rcst-pagehead .rcst-lede { color: #a3a8b1; margin: 0; } .rcst-pagination { margin-top: 24px; } /* ---------- Cards + grid ------------------------------------------------- */ .rcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .rcs-card { background: #fff; border: 1px solid var(--rcst-line); border-radius: 8px; overflow: hidden; transition: border-color .15s, transform .15s; } .rcs-card:hover { border-color: var(--rcst-accent); transform: translateY(-2px); } .rcs-card__link { display: flex; flex-direction: column; height: 100%; color: inherit !important; text-decoration: none !important; } .rcs-card__media { aspect-ratio: 16 / 10; background: #101114; display: grid; place-items: center; overflow: hidden; } .rcs-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .rcs-card__ph { color: #6f747c; font-family: var(--rcst-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; } .rcs-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .rcs-card__car { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rcst-accent-ink); } .rcs-card__title { font-size: 22px !important; font-weight: 700 !important; margin: 0; color: var(--rcst-ink); } .rcs-card__meta { font-size: 13px; color: var(--rcst-muted); font-family: var(--rcst-mono); } .rcs-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rcst-line); } .rcs-card__price { font-family: var(--rcst-display); font-style: italic; font-weight: 800; font-size: 20px; color: #1e8a4c; } .rcs-card__type { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #ececee; color: var(--rcst-muted); border-radius: 3px; padding: 2px 7px; } .rcs-card__count { font-size: 12px; color: var(--rcst-muted); margin-left: auto; } .rcs-empty { padding: 36px; text-align: center; color: var(--rcst-muted); border: 1px dashed var(--rcst-line); border-radius: 8px; background: #fff; } /* ---------- Filter chips ------------------------------------------------- */ .rcs-filters { display: grid; gap: 10px; margin-bottom: 26px; } .rcs-filters__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rcs-filters__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rcst-muted); min-width: 60px; } .rcs-chip { border: 1px solid var(--rcst-line); background: #fff; border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; color: var(--rcst-ink) !important; text-decoration: none !important; } .rcs-chip:hover { border-color: var(--rcst-accent); } .rcs-chip.is-on { background: var(--rcst-ink); border-color: var(--rcst-ink); color: #fff !important; } .rcs-filters__row--sub .rcs-chip { font-weight: 500; } /* ---------- Single listing ---------------------------------------------- */ .single-download .entry-title { font-size: clamp(34px, 4.4vw, 48px); } .single-download .rcs-viewer { border-radius: 8px; } .rcs-download .rcs-free { font-family: var(--rcst-display); } /* ---------- Forums (bbPress) -------------------------------------------- */ .rcst-search--forum { margin: 0; width: min(380px, 100%); } .rcst-join { display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; background: #fff; border: 1px solid var(--rcst-line); border-left: 4px solid var(--rcst-accent); border-radius: 8px; padding: 16px 20px; margin-bottom: 26px; color: var(--rcst-muted); } .rcst-join b { color: var(--rcst-ink); } .rcst-join__btns { display: flex; gap: 8px; flex-wrap: wrap; } .rcst-fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .rcst-fcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rcst-line); border-top: 3px solid var(--rcst-accent); border-radius: 8px; padding: 20px 22px 16px; } .rcst-fcard__title { font-size: 30px; margin: 0 0 6px; } .rcst-fcard__title a { color: var(--rcst-ink); text-decoration: none; } .rcst-fcard__title a:hover { color: var(--rcst-accent-ink); } .rcst-fcard__desc { color: var(--rcst-muted); font-size: 15px; margin-bottom: 14px; } .rcst-fcard__subs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .rcst-fcard__subs .rcs-chip { font-size: 12.5px; padding: 5px 10px; } .rcst-fcard__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; border-top: 1px solid var(--rcst-line); padding-top: 12px; font-size: 13.5px; color: var(--rcst-muted); } .rcst-fcard__stat b { font-family: var(--rcst-mono); font-weight: 600; color: var(--rcst-ink); } .rcst-fcard__last { flex-basis: 100%; } .rcst-fcard__last a { font-weight: 600; } .rcst-forum-latest { margin-top: 38px; } /* bbPress's own lists, topics and replies */ #bbpress-forums { font-size: 15px; margin-bottom: 0; } #bbpress-forums .bbp-search-form { display: none; } /* search lives in the page head */ #bbpress-forums div.bbp-breadcrumb { font-size: 13px; margin-bottom: 14px; } #bbpress-forums div.bbp-breadcrumb a { color: var(--rcst-accent-ink); } #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results { border: 1px solid var(--rcst-line); border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 18px; } #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { background: var(--rcst-dark); color: #b9bcc3; border: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; padding: 10px 14px; } #bbpress-forums li.bbp-footer { background: #f4f4f6; color: var(--rcst-muted); } #bbpress-forums li.bbp-header a { color: #fff; } #bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic { border-top: 1px solid var(--rcst-line); padding: 14px; } #bbpress-forums li.bbp-body ul.forum:first-child, #bbpress-forums li.bbp-body ul.topic:first-child { border-top: 0; } #bbpress-forums div.odd, #bbpress-forums ul.odd, #bbpress-forums div.even, #bbpress-forums ul.even { background: #fff; } #bbpress-forums ul.topic:hover, #bbpress-forums ul.forum:hover { background: #fbfbfc; } #bbpress-forums a.bbp-forum-title, #bbpress-forums a.bbp-topic-permalink { font-weight: 700; color: var(--rcst-ink); font-size: 16px; } #bbpress-forums a.bbp-forum-title:hover, #bbpress-forums a.bbp-topic-permalink:hover { color: var(--rcst-accent-ink); } #bbpress-forums .bbp-forum-content, #bbpress-forums p.bbp-topic-meta { color: var(--rcst-muted); font-size: 13.5px; } #bbpress-forums .bbp-forums-list { border: 0; margin-top: 6px; } #bbpress-forums .bbp-forums-list li { display: inline-block; margin: 0 6px 6px 0; } #bbpress-forums .bbp-forums-list li a { display: inline-block; border: 1px solid var(--rcst-line); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; color: var(--rcst-ink); text-decoration: none; } #bbpress-forums .bbp-forums-list li a:hover { border-color: var(--rcst-accent); } #bbpress-forums li.bbp-forum-topic-count, #bbpress-forums li.bbp-forum-reply-count, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-reply-count { font-family: var(--rcst-mono); color: var(--rcst-ink); } #bbpress-forums .bbp-topic-freshness, #bbpress-forums .bbp-forum-freshness { font-size: 13px; color: var(--rcst-muted); } #bbpress-forums .bbp-author-avatar img.avatar { border-radius: 50%; } #bbpress-forums div.bbp-reply-header, #bbpress-forums div.bbp-topic-header { background: #f4f4f6; border-top: 1px solid var(--rcst-line); font-size: 12.5px; color: var(--rcst-muted); padding: 8px 14px; } #bbpress-forums div.bbp-reply-header a, #bbpress-forums div.bbp-topic-header a { color: var(--rcst-muted); } #bbpress-forums div.bbp-reply-content, #bbpress-forums div.bbp-topic-content { font-size: 16px; line-height: 1.6; color: var(--rcst-ink); padding: 14px 18px; } #bbpress-forums div.bbp-reply-author a.bbp-author-name, #bbpress-forums div.bbp-topic-author a.bbp-author-name { font-weight: 700; color: var(--rcst-ink); } #bbpress-forums div.bbp-forum-header, #bbpress-forums li.bbp-body div.hentry { padding: 12px 14px; } #bbpress-forums .bbp-pagination { font-size: 13px; color: var(--rcst-muted); } #bbpress-forums .bbp-pagination-links a, #bbpress-forums .bbp-pagination-links span.current { border: 1px solid var(--rcst-line); border-radius: 4px; padding: 3px 9px; background: #fff; } #bbpress-forums .bbp-pagination-links span.current { background: var(--rcst-ink); color: #fff; border-color: var(--rcst-ink); } #bbpress-forums fieldset.bbp-form { border: 1px solid var(--rcst-line); border-radius: 8px; background: #fff; padding: 18px 20px; } #bbpress-forums fieldset.bbp-form legend { font-family: var(--rcst-display); font-style: italic; font-weight: 800; font-size: 22px; padding: 0 6px; } #bbpress-forums fieldset.bbp-form input[type=text], #bbpress-forums fieldset.bbp-form select, #bbpress-forums fieldset.bbp-form textarea { border: 1px solid var(--rcst-line); border-radius: 5px; padding: 8px 10px; } /* Kadence's "Create new topic in / Reply to" form: one white card, heading on the left */ #bbpress-forums form#new-post { background: #fff; border: 1px solid var(--rcst-line); border-top: 3px solid var(--rcst-accent); border-radius: 8px; padding: 20px 22px 18px; margin-top: 26px; } #bbpress-forums form#new-post fieldset.bbp-form { border: 0; padding: 0; margin: 0; background: transparent; } #bbpress-forums .bbpress-reply-head { text-align: left; margin: 0 0 14px; } #bbpress-forums .bbpress-reply-head .bbpress-reply-head-abovetitle { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rcst-accent); } #bbpress-forums .bbpress-reply-head h2.bbpress-reply-head-title { font-size: 30px; margin: 2px 0 0; } #bbpress-forums fieldset.bbp-form select { font-size: 14px; height: auto; line-height: 1.4; padding: 6px 30px 6px 8px; } #bbpress-forums fieldset.bbp-form label { font-size: 13px; font-weight: 600; color: var(--rcst-ink); } #bbpress-forums fieldset.bbp-form input#bbp_topic_title { font-size: 16px; } #bbpress-forums div.bbp-the-content-wrapper { border: 1px solid var(--rcst-line); border-radius: 5px; overflow: hidden; } #bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content { font-size: 15px; } #bbpress-forums .bbp-submit-wrapper { float: none; text-align: right; margin-top: 10px; } #bbpress-forums .bbp-submit-wrapper::before, #bbpress-forums .bbp-submit-wrapper::after { display: none; } #bbpress-forums form#new-post .bbp-template-notice { display: none; } /* "you can post unrestricted HTML" admin note */ #bbpress-forums .bbp-submit-wrapper button { background: var(--rcst-accent); color: #1a0d04; border: 0; border-radius: 5px; padding: 11px 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } #bbpress-forums .bbp-submit-wrapper button:hover { background: #ff8a45; } #bbpress-forums .bbp-template-notice { border: 1px solid #f3c3a2; border-radius: 6px; background: #fff5ee; color: #7a3208; padding: 10px 14px; } #bbpress-forums .bbp-template-notice ul { margin: 0; } #bbpress-forums .bbp-template-notice.info { border-color: var(--rcst-line); background: #fff; color: var(--rcst-muted); } @media (max-width: 960px) { .rcst-fcards { grid-template-columns: 1fr; } } @media (max-width: 700px) { #bbpress-forums li.bbp-forum-freshness, #bbpress-forums li.bbp-topic-freshness { display: none; } #bbpress-forums li.bbp-forum-info, #bbpress-forums li.bbp-topic-title { width: 70%; } #bbpress-forums li.bbp-forum-topic-count, #bbpress-forums li.bbp-forum-reply-count, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-reply-count { width: 15%; } } /* ---------- Footer ------------------------------------------------------- */ .site-footer, .site-footer .site-footer-row-container-inner { background: var(--rcst-dark) !important; color: #7d828b; } .site-footer a { color: #a3a8b1; } /* ---------- Small screens ----------------------------------------------- */ @media (max-width: 900px) { .rcst-hero__grid, .rcst-band__grid, .rcst-two { grid-template-columns: 1fr; } /* headline, text and search first on phones; the engine follows */ } @media (max-width: 560px) { .rcst-why { grid-template-columns: 1fr; } #masthead .site-title, #mobile-header .site-title { font-size: 17px !important; } #mobile-header .custom-logo { max-height: 42px !important; } } @media (prefers-reduced-motion: reduce) { .rcs-card { transition: none; } } /* Tighter menu on laptop-width screens so it stays on one line */ @media (max-width: 1440px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .5em; padding-right: .5em; font-size: 12px; letter-spacing: .04em; } #masthead .site-title::after { content: ""; } } /* Keep the menu on one line */ #masthead .header-navigation ul.menu { flex-wrap: nowrap; } #masthead .header-navigation ul.menu > li > a { white-space: nowrap; } @media (max-width: 1280px) { #masthead .site-title { font-size: 19px !important; } #masthead .custom-logo { max-height: 48px !important; } } /* ---------- Listing page (single-download.php) -------------------------- */ .rcst-single__bar { background: var(--rcst-dark); border-bottom: 1px solid #22252a; } .rcst-single__bar .rcst-wrap { padding-block: 12px; } .rcst-single__bar a { color: #a4a8b0; font-weight: 600; font-size: 14px; text-decoration: none; } .rcst-single__bar a:hover { color: #fff; } .rcst-single__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; padding-block: 26px 40px; } .rcst-single__main .rcs-viewer { margin: 0; border-radius: 10px; } .rcst-single__main .rcs-viewer canvas { aspect-ratio: 4 / 3; } .rcst-single__img { width: 100%; height: auto; border-radius: 10px; display: block; } .rcst-prose { background: #fff; border: 1px solid var(--rcst-line); border-radius: 10px; padding: 6px 22px 16px; margin-top: 18px; font-size: 16px; } .rcst-single__main .rcs-related { background: #fff; border: 1px solid var(--rcst-line); border-radius: 10px; padding: 6px 22px 14px; margin-top: 18px; } .rcst-single__side { display: grid; gap: 16px; position: sticky; top: 90px; } .rcst-sidecard { background: #fff; border: 1px solid var(--rcst-line); border-radius: 10px; padding: 20px 22px; } .rcst-sidecard .rcs-details .rcs-h { margin-top: 0; } .rcst-single__car { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rcst-accent-ink); } .rcst-single__title { font-size: clamp(32px, 3.4vw, 44px) !important; margin: 6px 0 10px; color: var(--rcst-ink); } .rcst-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .rcst-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #ececee; color: var(--rcst-muted) !important; border-radius: 3px; padding: 3px 8px; text-decoration: none !important; } .rcst-tag--kind { background: #fde6d6; color: var(--rcst-accent-ink) !important; } .rcst-tag--ok { background: #dcf2e5; color: #1e8a4c !important; } .rcst-sidecard .rcs-download { margin: 0 0 10px; border: 0; padding: 0; } .rcst-sidecard .rcs-free { font-size: 30px; } .rcst-sidecard .rcs-files .rcs-btn { width: 100%; text-align: center; box-sizing: border-box; } .rcst-sidecard .rcs-files li { display: grid; gap: 6px; } .rcst-sidecard .rcs-file { margin: 0; } .rcst-shared { color: var(--rcst-muted); font-size: 13px; margin: 8px 0 0; } .rcst-single__side .rcs-rcfy { margin: 0; background: #fff; } .rcs-details td { font-family: var(--rcst-mono); font-size: 13px; } @media (max-width: 960px) { .rcst-single__grid { grid-template-columns: 1fr; } .rcst-single__side { position: static; } } /* Hero caption sits under the model instead of over it */ .rcst-hero__model .rcs-viewer figcaption { position: static; text-align: right; margin-top: 2px; color: #6f747c; } /* ---------- Members, account, projects ---------------------------------- */ .rcst-pagehead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .rcst-member-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: start; } .rcs-member { background: #fff; border: 1px solid var(--rcst-line); border-radius: 10px; padding: 20px; position: sticky; top: 90px; } .rcs-member__top { display: flex; gap: 14px; align-items: center; } .rcs-member__avatar { border-radius: 50%; } .rcs-member__name { font-family: var(--rcst-display); font-style: italic; font-weight: 800; font-size: 26px; line-height: 1.05; } .rcs-member__since { color: var(--rcst-muted); font-size: 13px; } .rcs-member__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; text-align: center; } .rcs-member__stats div { background: #f3f3f4; border-radius: 6px; padding: 8px; font-size: 12px; color: var(--rcst-muted); text-transform: uppercase; letter-spacing: .06em; } .rcs-member__stats b { display: block; font-family: var(--rcst-mono); font-size: 20px; color: var(--rcst-ink); letter-spacing: 0; } .rcs-member__facts { list-style: none; margin: 0; padding: 0; font-size: 14px; } .rcs-member__facts li { padding: 7px 0; border-top: 1px solid var(--rcst-line); } .rcs-member__facts span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rcst-muted); } .rcs-member__bio { color: var(--rcst-muted); font-size: 14px; margin: 12px 0 0; } .rcs-account__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; } .rcs-account__form, .rcs-account__list { background: #fff; border: 1px solid var(--rcst-line); border-radius: 10px; padding: 18px 20px; } .rcs-account__list + .rcs-account__list { margin-top: 18px; } .rcs-account__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .rcs-account__head .rcs-h { margin: 0; } .rcs-btn--small { padding: 8px 12px; font-size: 12px; } .rcs-rows { list-style: none; margin: 10px 0 0; padding: 0; } .rcs-rows li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rcst-line); } .rcs-rows li a { font-weight: 600; color: var(--rcst-ink); flex: 1; min-width: 160px; } .rcs-rows__meta { color: var(--rcst-muted); font-size: 12px; } .rcs-status { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; padding: 2px 7px; } .rcs-status--publish { background: #dcf2e5; color: #1e8a4c; } .rcs-status--pending, .rcs-status--draft { background: #fde6d6; color: var(--rcst-accent-ink); } .rcs-pickfiles { border: 1px solid var(--rcst-line); border-radius: 8px; padding: 10px 14px; margin: 6px 0 12px; } .rcs-pickfiles legend { font-weight: 700; font-size: 14px; padding: 0 4px; } .rcs-pickfiles__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; max-height: 240px; overflow: auto; } /* Page content (share, account, post a project, dmca) */ .page .entry-content-wrap, .page .entry.content-bg { border-radius: 10px; } .rcst-comments { max-width: 860px; } .rcst-comments .comment-respond, .rcst-comments .comments-area { background: #fff; border: 1px solid var(--rcst-line); border-radius: 10px; padding: 18px 22px; } .rcst-agent, .rcst-agent a { font-size: 16px; } @media (max-width: 900px) { .rcst-member-grid, .rcs-account__grid { grid-template-columns: 1fr; } .rcs-member { position: static; } } /* ---------- Info pages (About, Contact, Terms, Privacy, DMCA) ------------ */ .rcst-info__wrap, .rcst-info .rcst-pagehead .rcst-wrap { max-width: 860px; } .rcst-info__body { margin-top: 0; padding: 10px 30px 22px; font-size: 16.5px; line-height: 1.65; color: var(--global-palette4); } .rcst-info__body h2 { font-size: 28px; margin: 26px 0 8px; color: var(--rcst-ink); } .rcst-info__body h2:first-child { margin-top: 14px; } .rcst-info__body ul { padding-left: 1.2em; } .rcst-info__body li { margin-bottom: 6px; } .rcst-info__body a { font-weight: 600; } @media (max-width: 600px) { .rcst-info__body { padding: 6px 18px 16px; } } .rcst-info--wide .rcst-info__wrap, .rcst-info--wide .rcst-pagehead .rcst-wrap { max-width: 1200px; } .rcst-info--wide .rcst-info__body { background: transparent; border: 0; padding: 0; } /* Footer: "powered by Race Cars For You" with the RCFY logo */ .rcst-powered { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7d828b; } .rcst-powered a { display: inline-flex; line-height: 0; opacity: .92; transition: opacity .15s; } .rcst-powered a:hover { opacity: 1; } .rcst-powered img { height: 54px; width: auto; } /* Header: 911 scan-line mark */ #masthead .custom-logo.rcst-mark, #mobile-header .custom-logo.rcst-mark { height: 52px !important; max-height: 52px !important; width: auto !important; } @media (max-width: 1024px) { #mobile-header .custom-logo.rcst-mark { height: 42px !important; max-height: 42px !important; } } /* Topic page: the "Author / Posts" header row */ #bbpress-forums li.bbp-header div, #bbpress-forums li.bbp-header .bbp-reply-content, #bbpress-forums li.bbp-header .bbp-reply-author { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #b9bcc3 !important; padding-top: 0; padding-bottom: 0; } /* Pinned topics: warm highlight instead of bbPress yellow; locked ones stay readable */ #bbpress-forums ul.sticky, #bbpress-forums ul.super-sticky { background: #fff6ef !important; box-shadow: inset 4px 0 0 #f26a1b; } #bbpress-forums ul.status-closed, #bbpress-forums ul.status-closed a { color: inherit !important; opacity: 1 !important; } #bbpress-forums ul.status-closed a.bbp-topic-permalink { color: var(--rcst-ink) !important; } #bbpress-forums ul.sticky a.bbp-topic-permalink::before, #bbpress-forums ul.super-sticky a.bbp-topic-permalink::before { content: "PINNED"; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #fff; background: #f26a1b; border-radius: 3px; padding: 2px 6px; margin-right: 8px; vertical-align: 2px; } /* Odd number of forum cards: the last one spans the full row */ .rcst-fcard:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ---------- Header logo: turning neon 911 with the neon wordmark under it ---------- turntable-911.jpg is --n frames side by side (256 x 128 px each, 2:1). */ .rcst-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 0; } .rcst-turntable, .rcst-wordmark { mix-blend-mode: screen; } /* black background disappears on the dark header */ .rcst-turntable { --h: 58px; display: block; height: var(--h); width: calc(var(--h) * 2); background-repeat: no-repeat; background-size: calc(var(--h) * 2 * var(--n, 16)) var(--h); background-position: 0 0; animation: rcst-turn 10s steps(var(--n, 16)) infinite; } @keyframes rcst-turn { to { background-position: calc(var(--h) * -2 * var(--n, 16)) 0; } } .rcst-turntable.is-live { background: none !important; animation: none !important; } /* turntable.js draws on a canvas instead */ .rcst-turntable canvas { display: block; width: 100%; height: 100%; } .rcst-wordmark { width: 158px; height: auto; margin-top: -4px; } .brand:hover .rcst-turntable { animation-duration: 5s; } /* the plain-text site title is replaced by the neon wordmark (kept for screen readers) */ #masthead .site-title, #mobile-header .site-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 1024px) { .rcst-turntable { --h: 42px; } .rcst-wordmark { width: 116px; } } @media (prefers-reduced-motion: reduce) { .rcst-turntable { animation: none; background-position: calc(var(--h) * -6) 0; } /* hold the 67.5 degree view */ } /* Scan-in mode: without JavaScript just show the finished car (front three-quarter). */ .rcst-turntable[data-mode="scan"] { animation: none; background-position: calc(var(--h) * -6) 0; } /* ---------- Bigger top bar ------------------------------------------------ */ #masthead .site-main-header-inner-wrap { min-height: 116px !important; } #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 16px; padding-left: .8em; padding-right: .8em; letter-spacing: .06em; } #masthead .header-navigation .menu > li.rcst-menu-cta > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a { padding: .7em 1.25em; margin-left: .8em; } .rcst-turntable { --h: 82px; } .rcst-wordmark { width: 218px; margin-top: -6px; } @media (max-width: 1600px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 15px; padding-left: .6em; padding-right: .6em; letter-spacing: .05em; } } @media (max-width: 1440px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 14px; padding-left: .5em; padding-right: .5em; letter-spacing: .04em; } .rcst-turntable { --h: 74px; } .rcst-wordmark { width: 196px; } } @media (max-width: 1280px) { #masthead .site-main-header-inner-wrap { min-height: 100px !important; } #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 13px; padding-left: .45em; padding-right: .45em; } .rcst-turntable { --h: 64px; } .rcst-wordmark { width: 170px; } } @media (max-width: 1024px) { .rcst-turntable { --h: 52px; } .rcst-wordmark { width: 140px; } } /* ---------- Taller top bar: bottom line down to the top of the hero engine ---------- */ #masthead .site-main-header-inner-wrap { min-height: 170px !important; } .rcst-turntable { --h: 118px; } .rcst-wordmark { width: 300px; margin-top: -8px; } .rcst-hero__grid { padding-block: 14px 44px; } @media (max-width: 1440px) { #masthead .site-main-header-inner-wrap { min-height: 150px !important; } .rcst-turntable { --h: 100px; } .rcst-wordmark { width: 262px; } } @media (max-width: 1280px) { #masthead .site-main-header-inner-wrap { min-height: 128px !important; } .rcst-turntable { --h: 82px; } .rcst-wordmark { width: 216px; } } @media (max-width: 1024px) { .rcst-turntable { --h: 52px; } .rcst-wordmark { width: 140px; } .rcst-hero__grid { padding-block: 32px 36px; } } /* HD wordmark (1121 x 74, cut from the full-size logo): tighter to the car */ .rcst-wordmark { margin-top: 2px; } /* ---------- Larger top menu ------------------------------------------------ */ #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 19px; padding-left: .75em; padding-right: .75em; letter-spacing: .05em; } #masthead .header-navigation .menu > li.rcst-menu-cta > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a { padding: .75em 1.3em; border-radius: 6px; } @media (max-width: 1700px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 17px; padding-left: .6em; padding-right: .6em; } } @media (max-width: 1440px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 16px; padding-left: .45em; padding-right: .45em; letter-spacing: .03em; } } @media (max-width: 1280px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 14px; padding-left: .4em; padding-right: .4em; letter-spacing: .02em; } } /* keep the Create profile button off the right edge */ @media (min-width: 1701px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 18px; padding-left: .62em; padding-right: .62em; } } @media (max-width: 1180px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 13px; padding-left: .32em; padding-right: .32em; letter-spacing: 0; } #masthead .header-navigation .menu > li.rcst-menu-cta > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a { padding: .6em .9em; margin-left: .4em; } } /* mid-size screens (small laptops, the app's browser pane): keep the menu big */ @media (max-width: 1280px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 16px; padding-left: .36em; padding-right: .36em; letter-spacing: .01em; } #masthead .header-navigation .menu > li.rcst-menu-cta > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a { padding: .6em .85em; margin-left: .3em; } .rcst-turntable { --h: 74px; } .rcst-wordmark { width: 190px; } } @media (max-width: 1150px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 15px; padding-left: .3em; padding-right: .3em; letter-spacing: 0; } .rcst-turntable { --h: 64px; } .rcst-wordmark { width: 165px; } } @media (max-width: 1080px) { #masthead .header-navigation .menu > li > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { font-size: 14px; padding-left: .26em; padding-right: .26em; } #masthead .header-navigation .menu > li.rcst-menu-cta > a, #masthead .main-navigation .primary-menu-container > ul > li.menu-item.rcst-menu-cta > a { padding: .55em .7em; } } /* ---------- Top menu hover ------------------------------------------------- */ #masthead .header-navigation .menu > li:not(.rcst-menu-cta) > a { position: relative; transition: color .18s ease; box-shadow: none !important; /* replaced by the animated underline below */ } #masthead .header-navigation .menu > li:not(.rcst-menu-cta) > a::after { content: ""; position: absolute; left: .45em; right: .45em; bottom: .15em; height: 2px; border-radius: 2px; background: var(--rcst-accent); box-shadow: 0 0 8px rgba(242, 106, 27, .8); transform: scaleX(0); transform-origin: center; transition: transform .22s ease; } #masthead .header-navigation .menu > li:not(.rcst-menu-cta) > a:hover, #masthead .header-navigation .menu > li:not(.rcst-menu-cta) > a:focus-visible { color: #fff !important; } #masthead .header-navigation .menu > li:not(.rcst-menu-cta) > a:hover::after, #masthead .header-navigation .menu > li:not(.rcst-menu-cta) > a:focus-visible::after, #masthead .header-navigation .menu > li.current-menu-item > a::after { transform: scaleX(1); } #masthead .header-navigation .menu > li.rcst-menu-cta > a { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } #masthead .header-navigation .menu > li.rcst-menu-cta > a:hover, #masthead .header-navigation .menu > li.rcst-menu-cta > a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(242, 106, 27, .45), 0 0 0 1px rgba(255, 160, 100, .5) inset; } @media (prefers-reduced-motion: reduce) { #masthead .header-navigation .menu > li > a, #masthead .header-navigation .menu > li > a::after { transition: none; } } /* ---------- Button hover (matches the top menu) ---------------------------- */ .rcst-btn, .rcs-btn { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } /* orange buttons: lift and glow */ .rcst-btn:not(.rcst-btn--ghost):hover, .rcst-btn:not(.rcst-btn--ghost):focus-visible, .rcs-btn:not(.rcs-btn--ghost):hover, .rcs-btn:not(.rcs-btn--ghost):focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(242, 106, 27, .45), 0 0 0 1px rgba(255, 160, 100, .5) inset; } /* outlined buttons: orange glowing border, brighter text, lift, and a laser line sliding out along the bottom */ .rcst-btn--ghost::after, .rcs-btn--ghost::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 2px; background: var(--rcst-accent); box-shadow: 0 0 8px rgba(242, 106, 27, .9); transform: scaleX(0); transition: transform .22s ease; } .rcst-btn--ghost:hover, .rcst-btn--ghost:focus-visible, .rcs-btn--ghost:hover, .rcs-btn--ghost:focus-visible { transform: translateY(-2px); border-color: var(--rcst-accent) !important; box-shadow: 0 0 14px rgba(242, 106, 27, .35), 0 0 0 1px rgba(242, 106, 27, .35) inset; background: rgba(242, 106, 27, .08); } .rcst-hero .rcst-btn--ghost:hover, .rcst-hero .rcst-btn--ghost:focus-visible { color: #fff !important; } .rcst-btn--ghost:hover::after, .rcst-btn--ghost:focus-visible::after, .rcs-btn--ghost:hover::after, .rcs-btn--ghost:focus-visible::after { transform: scaleX(1); } /* the search button in the hero */ .rcst-search button { transition: background-color .18s ease, box-shadow .18s ease; } .rcst-search button:hover, .rcst-search button:focus-visible { background: #ff8a45; box-shadow: 0 0 16px rgba(242, 106, 27, .55); } @media (prefers-reduced-motion: reduce) { .rcst-btn, .rcs-btn, .rcst-btn::after, .rcs-btn::after { transition: none; } .rcst-btn:hover, .rcs-btn:hover { transform: none; } } /* outlined buttons: keep the glow and lift, drop the bottom line */ .rcst-btn--ghost::after, .rcs-btn--ghost::after { display: none; } /* Footer: big static neon 911 (the T-shirt logo), black blended away on the dark footer */ .rcst-footer-car { display: block; width: min(760px, 92%); margin: 34px auto 18px; line-height: 0; } .rcst-footer-car img { display: block; width: 100%; height: auto; mix-blend-mode: screen; } /* Footer divider: a glowing scan line with a perspective laser grid receding up to it, so the black footer reads as a scan bed under the gray page. The grid sits behind the footer content (z-index -1 inside the isolated footer) so the neon logo still screen-blends. */ .site-footer { position: relative; isolation: isolate; } .site-footer .site-footer-row-container-inner, .site-footer .site-footer-wrap { background: transparent !important; } .site-footer::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 130px; background: url("data:image/svg+xml;utf8,") center top / 100% 100% no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 40%, transparent 100%); pointer-events: none; } .site-footer::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #ffd2b0 50%, transparent 100%) no-repeat, #f26a1b; background-size: 22% 100%, auto; background-position: -30% 0, 0 0; box-shadow: 0 0 10px 1px rgba(242,106,27,.85), 0 0 34px 4px rgba(242,106,27,.35); animation: rcst-scan-sweep 5s cubic-bezier(.45,0,.55,1) infinite; pointer-events: none; } @keyframes rcst-scan-sweep { from { background-position: -30% 0, 0 0; } to { background-position: 130% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .site-footer::after { animation: none; } } /* ---------- Top menu click: laser grid sweep (assets/scan-click.js) ---------- */ #masthead .header-navigation .menu > li > a.is-zapping, #mobile-drawer .menu > li > a.is-zapping { position: relative; overflow: hidden; } .rcst-zap { position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%; pointer-events: none; z-index: 2; transform: skewX(-20deg); background: repeating-linear-gradient(90deg, rgba(255,190,120,.95) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(0deg, rgba(255,150,70,.7) 0 1px, transparent 1px 6px), linear-gradient(90deg, rgba(255,110,30,.05), rgba(255,110,30,.35)); box-shadow: 0 0 10px rgba(242,106,27,.9), 0 0 22px rgba(242,106,27,.45); mix-blend-mode: screen; animation: rcst-zap .42s cubic-bezier(.45,0,.55,1) forwards; } /* on the orange button the grid is drawn in bright white so it shows up */ #masthead .header-navigation .menu > li.rcst-menu-cta > a .rcst-zap, #mobile-drawer .menu > li.rcst-menu-cta > a .rcst-zap { background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(0deg, rgba(255,240,220,.8) 0 1px, transparent 1px 6px), linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.3)); box-shadow: 0 0 12px rgba(255,220,180,.9); } @keyframes rcst-zap { 0% { left: -45%; opacity: 1; } 80% { opacity: 1; } 100% { left: 110%; opacity: 0; } } /* ---------- Phones ---------------------------------------------------------------- */ @media (max-width: 767px) { /* bigger header car (the menu is folded into the ☰ button, so there's room) */ .rcst-turntable { --h: 84px; } .rcst-wordmark { width: 220px; } /* footer grid: keep the desktop line spacing instead of squeezing it into a narrow screen */ .site-footer::before { left: 50%; right: auto; width: 1300px; margin-left: -650px; } } /* ---------- Phone menu (the ☰ drawer), styled like the computer menu ---------------- */ #mobile-drawer .drawer-inner { border-left: 1px solid var(--rcst-dark-line); } #mobile-drawer .drawer-content { padding: 6px 26px 40px; position: relative; } #mobile-drawer .drawer-content::before { content: ""; display: block; height: 2px; margin: 0 0 12px; background: var(--rcst-accent); box-shadow: 0 0 10px 1px rgba(242,106,27,.8); } #mobile-drawer .menu > li { border: 0 !important; } #mobile-drawer .menu > li > a { position: relative; display: block; padding: 15px 2px !important; font-size: 19px !important; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #a4a8b0 !important; border-bottom: 1px solid var(--rcst-dark-line) !important; transition: color .15s ease; } #mobile-drawer .menu > li > a:hover, #mobile-drawer .menu > li > a:active { color: #fff !important; } /* current page: white with the same glowing orange underline as the computer menu */ #mobile-drawer .menu > li.current-menu-item > a { color: #fff !important; } #mobile-drawer .menu > li.current-menu-item > a::after { content: ""; position: absolute; left: 2px; bottom: 8px; width: 2.2em; height: 2px; border-radius: 2px; background: var(--rcst-accent); box-shadow: 0 0 8px rgba(242,106,27,.8); } /* Log in and Create profile become buttons, side by side */ #mobile-drawer .menu > li.rcst-menu-login, #mobile-drawer .menu > li.rcst-menu-cta { display: inline-block; width: calc(50% - 6px); margin-top: 22px; vertical-align: top; } #mobile-drawer .menu > li.rcst-menu-login { margin-right: 8px; } #mobile-drawer .menu > li.rcst-menu-login > a, #mobile-drawer .menu > li.rcst-menu-cta > a { text-align: center; font-size: 15px !important; padding: 14px 8px !important; border-radius: 6px; border: 1px solid #3a3e46 !important; color: #fff !important; } #mobile-drawer .menu > li.rcst-menu-cta > a { background: var(--rcst-accent); border-color: var(--rcst-accent) !important; color: #1a0d04 !important; font-weight: 700; box-shadow: 0 6px 18px rgba(242,106,27,.35); } /* only one account item shows when logged in (My account): full width */ #mobile-drawer .menu > li.rcst-menu-account > a { color: #fff !important; } #mobile-drawer .menu-toggle-close { color: #fff !important; } #mobile-drawer .menu > li.rcst-menu-login > a, #mobile-drawer .menu > li.rcst-menu-cta > a { white-space: nowrap; font-size: 14px !important; letter-spacing: .04em; padding: 15px 6px !important; } /* ---------- Phone menu row: the computer menu buttons, swipeable, under the logo ------ */ .rcst-phone-nav { display: none; } @media (max-width: 1024px) { .rcst-phone-nav { display: block; background: var(--rcst-dark); border-bottom: 1px solid var(--rcst-dark-line); } #mobile-header .mobile-toggle-open-container, #mobile-header .menu-toggle-open { display: none !important; } .rcst-phone-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px 16px 12px; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* soft fade at the right edge hints there's more to swipe */ -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } .rcst-phone-menu::-webkit-scrollbar { display: none; } .rcst-phone-menu > li { flex: 0 0 auto; margin: 0; } .rcst-phone-menu > li > a { position: relative; display: block; white-space: nowrap; padding: 10px 10px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #a4a8b0 !important; text-decoration: none; } .rcst-phone-menu > li.current-menu-item > a { color: #fff !important; } .rcst-phone-menu > li > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--rcst-accent); box-shadow: 0 0 8px rgba(242,106,27,.8); transform: scaleX(0); transition: transform .2s ease; } .rcst-phone-menu > li.current-menu-item > a::after, .rcst-phone-menu > li > a:active::after { transform: scaleX(1); } .rcst-phone-menu > li.rcst-menu-login > a { border: 1px solid #3a3e46; border-radius: 6px; margin-left: 6px; padding: 8px 12px; } .rcst-phone-menu > li.rcst-menu-cta { padding-right: 40px; } /* room past the fade */ .rcst-phone-menu > li.rcst-menu-cta > a { background: var(--rcst-accent); color: #1a0d04 !important; font-weight: 700; border-radius: 6px; padding: 9px 14px; margin-left: 4px; box-shadow: 0 4px 14px rgba(242,106,27,.4); } .rcst-phone-menu > li.rcst-menu-login > a::after, .rcst-phone-menu > li.rcst-menu-cta > a::after { content: none; } .rcst-phone-menu > li > a.is-zapping { overflow: hidden; } .rcst-phone-menu > li.rcst-menu-cta > a .rcst-zap { background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(0deg, rgba(255,240,220,.8) 0 1px, transparent 1px 6px), linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.3)); } } /* ---------- Home, phones only: menu as a list of described buttons ------------------ */ .rcst-phone-links { display: none; } @media (max-width: 767px) { .rcst-phone-links { display: grid; gap: 10px; margin-top: 8px; } .rcst-phone-link { position: relative; display: block; padding: 16px 44px 16px 18px; border-radius: 8px; background: #15171b; border: 1px solid #26292f; text-decoration: none; transition: transform .15s ease, border-color .15s ease; } .rcst-phone-link b { display: block; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .rcst-phone-link span { display: block; margin-top: 4px; color: #9a9fa8; font-size: 14px; line-height: 1.45; } .rcst-phone-link::after { content: "→"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--rcst-accent); font-size: 20px; font-weight: 700; } .rcst-phone-link:active { transform: scale(.985); border-color: var(--rcst-accent); } .rcst-phone-link--cta { background: var(--rcst-accent); border-color: var(--rcst-accent); box-shadow: 0 6px 18px rgba(242,106,27,.35); } .rcst-phone-link--cta b { color: #1a0d04; } .rcst-phone-link--cta span { color: #3a1c08; } .rcst-phone-link--cta::after { color: #1a0d04; } a.rcst-phone-link.is-zapping { overflow: hidden; } .rcst-phone-link--cta .rcst-zap { background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(0deg, rgba(255,240,220,.8) 0 1px, transparent 1px 6px), linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.3)); } } /* ---------- Phones: logo centred and bigger; the laser box spans the whole header ------ */ @media (max-width: 767px) { #mobile-header .site-main-header-inner-wrap { display: block; } #mobile-header .site-header-main-section-right { display: none; } #mobile-header .site-header-main-section-left, #mobile-header .site-header-main-section-left > .site-header-item, #mobile-header .site-branding, #mobile-header .site-branding a.brand { width: 100%; justify-content: center; } #mobile-header .rcst-lockup { display: flex; width: 100%; } /* car box = full header width (edge to edge); turntable.js keeps the car's own shape, centred */ #mobile-header .rcst-turntable { --h: 118px; width: calc(100% + 48px); margin-inline: -24px; } #mobile-header .rcst-wordmark { width: 260px; margin-top: 0; } }