/* ==========================================================================
mvp-custom.css — PROJECT-ONLY CUSTOM CSS. SAFE TO EDIT BY HAND.
THIS FILE IS YOURS.
----------------------------------------------------------------------
* It is loaded LAST on every page, so anything here wins the cascade.
* `tools/build-page.py` NEVER writes to it. Re-running the generator,
re-scraping the reference site, or rebuilding every page will not
touch a single line in here.
* Nothing that syncs from the redink-metro WordPress theme touches it
either — it does not exist in that theme.
=> Put every one-off fix, tweak and override that is specific to THIS
MVP site in this file. It is the one place guaranteed to survive a
sync with the team.
WHAT GOES WHERE
----------------------------------------------------------------------
assets/css/theme.min.css, nav.min.css, blocks-inline.css, *.min.css
Copied verbatim from the WP theme / reference pages. NEVER hand-edit
these — a re-sync overwrites them and your change disappears.
assets/css/mvp-overrides.css
Support CSS that the GENERATED MARKUP depends on: the `.mvp-enquire`
WhatsApp card that replaces the HubSpot form, and the
`.social-link-whatsapp` icon. Editing it can break generated markup,
so treat it as code that belongs to tools/build-page.py.
assets/css/mvp-custom.css <-- THIS FILE
Free-form. Anything you want. No rules except: keep it commented so
the next person knows why each block exists.
========================================================================== */
/* ==========================================================================
BRAND PALETTE — Pola Renovasi
WHY THIS LIVES HERE AND NOT IN theme.min.css
----------------------------------------------------------------------
theme.min.css is a verbatim copy of the redink-metro WP theme. Recolouring
it in place would be lost the next time it is re-synced, and it would make
the diff against the team's theme unreadable. The theme is well tokenised —
nearly every colour resolves to --theme-color-primary / -secondary — so the
whole site can be rebranded by redeclaring those tokens on :root from the
LAST stylesheet in the chain, which is this file.
Result: theme.min.css stays byte-identical to the team's copy, and this
block is the single source of truth for brand colour. See README §4b.
THE LOGO
----------------------------------------------------------------------
assets/images/brand/logo.png carries exactly three colours:
#072A50 navy the "R" monogram and the word POLA — the dominant colour
#DC6812 orange the single vertical bar — a small, deliberate accent
#3A3A3C ink the roofline and the word RENOVASI — the neutral
MAPPING NOTE — read before swapping navy and orange
----------------------------------------------------------------------
The theme has two brand slots and they are NOT "brand colour 1 / 2":
--theme-color-primary the ACCENT: button fills, link colour, active
states, icon fills, focus rings
--theme-color-secondary the DARK: it is what `.sc-dark` sections use as
their BACKGROUND (--theme-bg-color), and it feeds
--theme-color-dark-*
So navy goes in `primary` and a deeper navy goes in `secondary`. Putting
orange in `secondary` would turn every dark section (hero band, mission
statement, footer) into a full-bleed orange panel.
Orange stays an accent, matching the proportion it has in the logo: hover
fills, icons, the decorative pattern line art, and links inside dark
sections. It is never used for small text on white — #DC6812 on white is
only 3.48:1, below the 4.5:1 AA floor, which is why --brand-orange-dark
(4.95:1) carries anything orange that has text on or in it.
========================================================================== */
:root {
/* --- the logo, verbatim ------------------------------------------------ */
--brand-navy: #072A50;
--brand-orange: #DC6812;
--brand-ink: #3A3A3C;
/* --- derived tints and shades ------------------------------------------
Same treatment the theme gave its own primary/secondary ramps: one step
lighter and one step darker, hue held constant.
--brand-navy-deep is the dark-section background. It is a step below
--brand-navy on purpose: orange on #041A32 is 5.03:1 (AA), orange on
#072A50 is only 4.14:1, so the deeper ground is what makes orange
usable as a link colour inside `.sc-dark`. */
--brand-navy-light: #0C4A8C;
--brand-navy-deep: #041A32;
--brand-navy-deepest: #02101F;
--brand-orange-light: #F08028;
--brand-orange-dark: #B4550B;
/* Errors keep a red — nothing else in the palette reads as "wrong", and
the theme already ships rgba(192,43,10) for the error focus ring, so
this is that colour made explicit. */
--brand-danger: #C02B0A;
/* --- theme brand slots ------------------------------------------------- */
--theme-color-primary: var(--brand-navy);
--theme-color-primary-light: var(--brand-navy-light);
--theme-color-primary-dark: var(--brand-navy-deep);
--theme-color-primary-contrast: #ffffff;
--theme-color-secondary: var(--brand-navy-deep);
--theme-color-secondary-light: var(--brand-navy);
--theme-color-secondary-dark: var(--brand-navy-deepest);
--theme-color-secondary-contrast: #ffffff;
/* named aliases the theme still ships for its `.sc-jade` / `.sc-lime`
section classes — unused on this site, remapped so they cannot leak the
old red or indigo if a block ever picks them up */
--theme-color-jade: var(--brand-orange);
--theme-color-lime: var(--brand-navy);
/* --- ink ---------------------------------------------------------------
Body copy and headings both take the logo neutral (11.35:1 on white).
Hierarchy comes from --theme-headings-weight: 700, not from colour.
`.sc-dark` overrides --theme-title-color to white at higher specificity,
so dark sections are untouched. */
--bs-body-color: var(--brand-ink);
--bs-body-color-rgb: 58, 58, 60;
--theme-title-color: var(--brand-ink);
/* --- orange, placed deliberately ---------------------------------------
Non-text surfaces only at full strength; anything carrying a label uses
--brand-orange-dark so white-on-orange clears 4.5:1. */
--theme-btn-hover-bg-color: var(--brand-orange-dark);
--theme-btn-hover-border-color: var(--brand-orange-dark);
--theme-btn-secondary-hover-bg-color: var(--brand-orange-dark);
--theme-btn-secondary-hover-border-color: var(--brand-orange-dark);
--theme-btn-light-hover-bg-color: var(--brand-orange-dark);
--theme-btn-light-hover-border-color: var(--brand-orange-dark);
--theme-active-btn-hover-bg-color: var(--brand-orange-dark);
--theme-active-btn-hover-border-color: var(--brand-orange-dark);
--theme-icon-bg-color: var(--brand-orange);
--theme-active-burger-color: var(--brand-orange);
--social-links-icon-color-hover: var(--brand-orange);
/* Only the HOVER is retargeted. The theme's `:root` sets
--theme-link-color: var(--theme-color-base-contrast), so body links already
inherit the ink colour (11.35:1) — they are not primary-coloured. Where the
theme DOES route a link through a brand slot it is navy: `.sc-lightgrey` uses
secondary, `.mn-light` (the navbar) uses primary. All three land above AA. */
--theme-link-hover-color: var(--brand-orange-dark);
--theme-title-link-hover-color: var(--brand-orange-dark);
--theme-breadcrumbs-link-hover-color: var(--brand-orange-dark);
--theme-input-error-color: var(--brand-danger);
/* --- bootstrap layer ---------------------------------------------------
Bootstrap's own :root sits BEFORE the theme's in theme.min.css and a few
of its tokens hold the old red as a literal rather than a var(). */
--bs-primary: var(--brand-navy);
--bs-primary-rgb: 7, 42, 80;
--bs-secondary: var(--brand-navy-deep);
--bs-secondary-rgb: 4, 26, 50;
--bs-link-color: var(--brand-navy);
--bs-link-color-rgb: 7, 42, 80;
--bs-link-hover-color: var(--brand-orange-dark);
--bs-pagination-active-bg: var(--brand-navy);
--bs-pagination-active-border-color: var(--brand-navy);
/* --- block-level tokens that hardcode their own near-brand colours ----- */
--featured-designs-accent: var(--brand-navy); /* was #31235c */
--featured-designs-ink: var(--brand-ink); /* was #111111 */
--card-slider-ink: var(--brand-ink); /* was #111111 */
--section-faq-icon-color: var(--brand-ink); /* was #191919 */
}
/* --------------------------------------------------------------------------
Dark sections — orange is the only accent that reads on navy.
`.sc-dark` points its accent, hover and icon tokens at --theme-color-primary,
which is now navy: on a navy background those states become invisible. Repoint
them at the full-strength orange, which clears AA on --brand-navy-deep
(5.03:1) — this is the one place orange is used at full strength for text.
-------------------------------------------------------------------------- */
.sc-dark {
--theme-accent-color: var(--brand-orange);
--theme-link-hover-color: var(--brand-orange);
--theme-title-link-hover-color: var(--brand-orange);
--theme-icon-bg-color: var(--brand-orange);
--theme-slider-arrow-hover-color: var(--brand-orange);
--theme-slider-arrow-hover-border-color: var(--brand-orange);
--theme-dropitem-bg-hover-color: var(--brand-orange);
--theme-input-error-color: var(--brand-orange-light);
}
/* Same problem in the footer, which also sets its link hover from primary — but
the footer sits on the light --theme-bg-color, not on navy, so it takes the
burnt orange (4.95:1) rather than the full-strength one. */
.sc-footer {
--theme-copyright-link-hover-color: var(--brand-orange-dark);
}
/* --------------------------------------------------------------------------
Footer — "Talk to Us" CTA column
`.btn-row` carries `margin-top: var(--section-btn-row-margin-top)` (40px,
24px at smaller breakpoints) because it is normally the last thing in a
content block. In the footer CTA column it is the ONLY thing in the column,
so that top margin just pushes the button out of line with the adjacent
footer columns. Zero it out.
Overriding the token as well as the property keeps it correct at every
breakpoint, since the theme re-declares the token inside media queries.
-------------------------------------------------------------------------- */
.footer__cta.btn-row {
--section-btn-row-margin-top: 0;
margin-top: 0;
}
/* --------------------------------------------------------------------------
Mobile offcanvas menu — logo band aligned to the main navbar
`#mobile_nav_brand` is moved into `.hc-offcanvas-nav` by nav.min.js and sits
ON TOP of `.nav-container` (z-index 9999 vs 9998), so the container reserves
room for it with a padding-top. The theme sizes that band for the reference
site, which puts the Perth Metro / South West location switcher in it and
hides the logo — we strip the switcher and show the logo instead, so the
theme's 110px top padding just reads as a big empty gap.
Rebuild the band to the exact geometry of `.main-nav-wrapper` on mobile:
height var(--theme-mainmenu-height) = 67px, plus the same 1px #F0F0F0
bottom rule the navbar has
padding 0 20px -> .container gutter (--bs-gutter-x: 40px) at this width
logo sized by the shared brand-logo rule below, vertically centred —
same as .navbar-brand__logo-simple, so it lands in the same place
so the logo does not move when the menu opens over the navbar. The container
padding-top then matches the band's full height, nothing more.
Scoped to the offcanvas breakpoint (disableAt: 1200 in nav.min.js).
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1199.98px) {
.mobile-brand__wrapper {
top: calc(var(--theme-wp-admin-bar-height) + var(--theme-announcement-height) + var(--theme-mobile-top-nav-height));
padding: 0 20px;
border-bottom: 1px solid #F0F0F0;
}
/* the height goes on the link, not the wrapper: `.main-nav-wrapper > .container`
is 67px tall and sits OVER its parent's 1px bottom border, so the logo centres
in a full 67px there — put the border outside the 67px here as well */
.mobile-brand {
height: var(--theme-mainmenu-height);
}
.hc-offcanvas-nav .nav-container {
padding-top: calc(var(--theme-mainmenu-height) + 1px);
}
}
/* --------------------------------------------------------------------------
Brand logo — driven by height, not width
The theme sizes the logo by WIDTH (`8.75rem`, dropping to `118px` at 1360px
and again at 1200px) inside a fixed `height: 2.5rem` box with
`object-fit: contain`. That was tuned for the reference site's chunky
417x120 mark, which is close enough to the box's own 3.5:1 to fill it.
Ours is a wide horizontal lockup — 800x121, about 6.6:1 — so a width-driven
box letterboxes it: at 118px wide it renders ~18px tall in a 40px slot and
reads as an undersized logo with air above and below.
Drive it from the height instead and let the width follow the aspect ratio.
One unscoped rule replaces all three of the theme's breakpoint widths, and
`max-width: 100%` keeps it inside the narrowest navbar. Both `.navbar-brand`
and `.mobile-brand` are `display: flex; align-items: center`, so the shorter
image still centres in its bar.
-------------------------------------------------------------------------- */
.navbar-brand__logo-simple,
.mobile-brand__logo {
width: auto;
height: 1.75rem;
max-width: 100%;
object-fit: contain;
}
/* Same problem in the footer, via a different rule:
`.footer__nav-column:first-child img.size-full` caps the logo at
`max-width: min(8.75rem, 100%)`, i.e. 140px, which lands ours at 21px tall.
Match that selector's specificity (0,3,1) so this wins on source order —
mvp-custom.css is the last stylesheet on every page — and size by height
again. 2rem is a touch taller than the navbar's 1.75rem, which is the usual
relationship between a footer lockup and a nav one. */
.footer__nav-column:first-child img.footer__logo {
width: auto;
height: 2rem;
max-width: 100%;
}
/* --------------------------------------------------------------------------
Navbar call button — bare icon, identical on desktop and mobile
The theme gives `.navbar__actions .btn` two different looks: an outlined
`.btn.h-dark` pill on desktop, and below 1200px a bare 24px icon (padding 0,
no box-shadow, transparent). The bare icon is the one we want, at every
width — the pill reads as a heavy floating outline next to the burger.
So: take the theme's own mobile treatment and apply it to the call button at
all widths. Scoped to `.btn.cdb-icon` so the "Talk to Us" button beside it
(desktop only, `.navbar__enquire-btn`) keeps its pill. `!important` is
required on padding, background and box-shadow — the theme rules being
undone use it, and `body:not(.windows-os) .btn.h-dark` outranks this on
padding.
The label is hidden at every width too (it is a 1px `.screen-reader-text`
box that still sits in the flex flow on desktop, so it would widen the icon
by 7px). The link keeps its `aria-label="Call us"`.
-------------------------------------------------------------------------- */
.navbar__actions .btn.cdb-icon {
width: 24px;
height: 24px;
padding: 0 !important;
border-radius: 0;
background-color: transparent !important;
box-shadow: none !important;
}
.navbar__actions .btn.cdb-icon i {
width: 24px;
height: 24px;
margin-right: 0;
background-color: var(--brand-ink);
}
.navbar__actions .btn.cdb-icon span {
display: none;
}
/* `.btn-row` bottom-aligns its buttons (align-items: flex-end). That was fine
when both were ~40px tall; a 24px icon next to the 40px "Talk to Us" pill
hangs 8px low, so centre them instead. */
.navbar__actions .btn-row {
align-items: center;
}
/* the pill's hover fill is gone with the pill, so the icon itself carries the
state — same accent as every other link hover (--theme-link-hover-color,
now --brand-orange-dark; see the BRAND PALETTE block at the top) */
.navbar__actions .btn.cdb-icon:hover i,
.navbar__actions .btn.cdb-icon:focus i,
.navbar__actions .btn.cdb-icon:active i {
background-color: var(--theme-link-hover-color);
}
/* ---------------------------------------------------------------------------
Layanan Kami slider (cdb-featured-designs repurposed)
The reference cards carried a bed/bath/car meta row; ours carry a one-line
service description instead, so it needs its own rule.
-------------------------------------------------------------------------- */
.featured-design-card__desc {
margin: 0;
color: var(--featured-designs-muted, #5c5c5c);
font-size: 1rem;
line-height: 1.45;
}
/* ---------------------------------------------------------------------------
Promo slider (cdb-card_slider) — the cards show the finished ad creatives,
which already carry their own headline and price burned into the artwork.
Three departures from the theme:
1. No scrim. The theme darkens the bottom of the card image so overlaid text
stays readable; our posters are the artwork, and dimming them muddies the
lower third of the creative for the sake of one button that reads fine on
its own.
2. No hover zoom. scale(1.05) crops the poster's own headline and price at
the edges.
3. Title and description are mobile-only. Below 768px the theme moves
.card-slide__content out of the image and into a white body card under it,
where there is room for real copy; on desktop the content sits over the
poster, so showing them there would duplicate the artwork.
-------------------------------------------------------------------------- */
.cdb-card_slider .card-slide__image:after {
display: none;
}
@media (min-width: 768px) {
.cdb-card_slider .card-slide__link:hover .card-slide__image img,
.cdb-card_slider .card-slide__link:focus .card-slide__image img {
transform: none;
}
.cdb-card_slider .card-slide__title,
.cdb-card_slider .card-slide__description {
display: none;
}
}
/* ---------------------------------------------------------------------------
Hero scrim. The reference hero sat on dim video footage; ours sits on bright
daylight exteriors, so the headline needs its own gradient to stay readable
instead of relying on the photo being dark.
-------------------------------------------------------------------------- */
.cdb-hero_slider--style-redink .hero_slider__slide:after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
100deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.45) 42%,
rgba(0, 0, 0, 0.1) 72%,
rgba(0, 0, 0, 0) 100%
);
}
@media (max-width: 781.98px) {
.cdb-hero_slider--style-redink .hero_slider__slide:after {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.6) 60%,
rgba(0, 0, 0, 0.78) 100%
);
}
}
.cdb-hero_slider--style-redink .hero_slider__slide_content {
position: relative;
z-index: 2;
}
/* ---------------------------------------------------------------------------
"Lagi Butuh yang Mana?" tiles. The section background is now a photo rather
than the reference's dark graphic, so the white section heading needs a scrim
behind it.
-------------------------------------------------------------------------- */
.cdb-featured_tiles--goal {
position: relative;
}
.cdb-featured_tiles--goal:before {
content: "";
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.62);
pointer-events: none;
}
.cdb-featured_tiles--goal > .container {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------------
Mission statement over a photo. Same reason as the hero: the reference image
was dark, ours is a bright daylight exterior, so the statement needs a scrim.
-------------------------------------------------------------------------- */
.cdb-featured_statement--with-bgimage:after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: rgba(9, 14, 26, 0.58);
}
.cdb-featured_statement--with-bgimage > .container {
position: relative;
z-index: 1;
}
/* Page-title banner: same scrim rationale as the hero — bright photo, light text. */
.cdb-page_title_banner--with-bgimage:after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(9, 14, 26, 0.78) 0%,
rgba(9, 14, 26, 0.5) 48%,
rgba(9, 14, 26, 0.18) 100%
);
}
.cdb-page_title_banner--with-bgimage > .container {
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------------
Decorative section patterns — recoloured to the brand orange.
`.section.pattern-N:before/:after` paint the theme's hand-drawn line
flourishes as inline-SVG `background-image`s. Seven of them ship; four carry
the old brand red baked into the data URI as `stroke='%23e2001a'`, so they
are the ONE thing on the site that a token swap cannot reach:
pattern-1 swoosh behind "Layanan Kami" (index, tentang) red
pattern-3 tall stroke beside the testimonials (index) red
pattern-7 corner marks on the /tentang richtext block red
pattern-2 / -4 / -5 / -6 cream, fine as-is
Only the four red ones are restated here, byte-identical to the theme's
declaration except for the colour. Geometry, repeat, size and position are
all left to the theme rule underneath — these are `background-image` only,
so nothing can drift. Selectors match the theme's exactly and win on source
order, since this file loads last.
Line art is not text, so these take the full-strength --brand-orange
(#DC6812) rather than the darkened variant.
TO RE-GENERATE after another palette change, from the repo root:
python3 - <<'EOF'
import re
t = open('assets/css/theme.min.css').read()
for s in ['.section.pattern-1:before', '.section.pattern-3:before',
'.section.pattern-7:before', '.section.pattern-7:after']:
for m in re.finditer(r'([^{}]{0,60})\{([^{}]*url\("data:image/svg[^"]*"\)[^{}]*)\}', t):
if m.group(1).split('}')[-1].split(';')[-1].strip() != s:
continue
u = re.search(r'url\("(data:[^"]*)"\)', m.group(2)).group(1)
print('%s {\n\tbackground-image: url("%s");\n}\n'
% (s, re.sub(r'%23[eE]2001[aA]', '%23DC6812', u)))
EOF
-------------------------------------------------------------------------- */
.section.pattern-1:before {
background-image: url("data:image/svg+xml,%3Csvg width='1920' height='893' viewBox='0 0 1920 893' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1712.01 109.43C1712.01 109.434 1712 109.439 1712 109.444M1712 109.444C1464.33 353.953 1740.42 544.863 1874.05 358.421C1955.37 251.962 1905.74 56.5274 1712.02 109.434M1712 109.444C1712 109.443 1712.01 109.442 1712.01 109.441C1712.01 109.438 1712.02 109.436 1712.02 109.434M1712 109.444C1544.87 150.696 1541.2 285.85 1500.86 390.807C1481.81 433.174 1450.68 558.353 1407.19 493.806C1343.92 399.898 1247.97 352.328 1191.04 481.253C1157 558.353 1089 723.444 872 803.444C655 883.444 296 948.444 0 819.444M1712.02 109.434L1712.02 109.434M1712.02 109.434C1883.73 -81.4627 2145.03 -1.67336 2153 188.066' stroke='%23DC6812' stroke-width='3' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
.section.pattern-3:before {
background-image: url("data:image/svg+xml,%3Csvg width='485' height='830' viewBox='0 0 485 830' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M66.3762 123.684C169.038 584.977 -248.135 660.041 -263.849 340.71C-278.503 155.431 -114.563 -58.3391 66.3708 123.688M-455.864 -43.0853C-308.795 -283.598 10.7722 -223.734 66.3708 123.699C225.671 275.062 165.955 442.209 135.29 601.511C126.047 667.437 102.448 796.555 166.446 789.561C273.781 740.901 428.705 700.357 420.404 900.156C416.502 967.807 446.5 1030.89 483.433 1101.45' stroke='%23DC6812' stroke-width='3' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
.section.pattern-7:before {
background-image: url("data:image/svg+xml,%3Csvg width='483' height='195' viewBox='0 0 483 195' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='p7tr'%3E%3Crect width='483' height='195' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23p7tr)'%3E%3Cpath d='M297.734 118.869C297.732 118.866 297.73 118.864 297.728 118.861M297.728 118.861C192.857 -10.4918 337.932 -77.9184 389.85 17.5454C422.042 72.3435 391.601 154.9 297.737 118.867M297.728 118.861C297.73 118.862 297.732 118.863 297.734 118.863L297.737 118.867M297.728 118.861C216.375 89.8427 203.627 34.5 188.385 -18.5C182.333 -39.5437 187.229 -81.973 164.32 -73.0041C131.224 -46.7269 79.1734 -17.8316 53.4656 -79.501C45.1689 -100.499 24.8623 -116.482 0.884766 -134M297.737 118.867C368.615 218.614 539.604 214.537 559.885 125.649' stroke='%23DC6812' stroke-width='3' stroke-miterlimit='10'/%3E%3C/g%3E%3C/svg%3E");
}
.section.pattern-7:after {
background-image: url("data:image/svg+xml,%3Csvg width='332' height='175' viewBox='0 0 332 175' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='p7bl'%3E%3Crect width='333.314' height='188' fill='white' transform='translate(-2)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23p7bl)'%3E%3Cpath d='M223.753 42.5807C223.75 42.5809 223.748 42.581 223.745 42.5811M223.745 42.5811C92.1184 49.5904 101.058 169.041 188.308 149.098C239.319 139.035 285.52 78.111 223.752 42.583M223.745 42.5811L223.749 42.5834L223.752 42.583M223.745 42.5811C171.764 10.6292 130.85 39.5948 90.0187 60.0433C72.8794 67.5658 39.696 83.7979 37.105 65.8156C32.6285 34.7485 42.8207 -12.469 -10.5018 4.95437C-28.4802 11.1514 -47.5972 7.75722 -69.2188 3.03967M223.752 42.583C321.373 31.3858 360.48 146.449 305.884 204.802' stroke='%23DC6812' stroke-width='2.72464' stroke-miterlimit='10'/%3E%3C/g%3E%3C/svg%3E");
}
/* --------------------------------------------------------------------------
Last two hardcoded reds in the synced component CSS.
Both are literals rather than tokens, so the palette block above cannot
reach them. Neither is currently visible — the wishlist button is inert on
this MVP (`.mvp-inert`, see mvp-overrides.css) and `.hamburger-inner` is dead
CSS the live offcanvas trigger never uses (`.hc-nav-trigger span` draws the
burger, and that one already reads --theme-burger-color) — but they are one
line each, and leaving a stale #e2001a in the sheet is how it comes back.
-------------------------------------------------------------------------- */
.featured-design-card__wishlist-btn.is-favourited:after {
background: var(--brand-orange);
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
background-color: var(--theme-burger-color);
}
/* --------------------------------------------------------------------------
Old-brand colour that is inline in the page HTML, not in a stylesheet.
Two things survive a token swap because they never read a token:
1. ``
A WordPress per-block inline style, carried over by the scrape. It sits in
the BODY, so it is later in the document than this stylesheet and wins at
equal specificity — hence `section.` in front, which takes it from (0,1,0)
to (0,1,1). The section is already `.sc-dark`, so this just brings its
hardcoded ground back in line with every other dark section.
Present on: index, tentang, kebijakan-privasi.
2. `.section-pattern` — the same hand-drawn flourishes as `.section.pattern-N`
(see the block above) but shipped as INLINE `