/* ---- O'Brien Originals — site CSS ---- */ :root{ --oo-red:#950606; --oo-ink:#0D0A0A; --oo-ink-2:#17100F; --oo-paper:#F3EDE3; } /* square everything */ button, .wixui-button, input, textarea, select, img { border-radius:0 !important; } /* eyebrow label — add class "oo-eyebrow" to the text element */ .oo-eyebrow{ font-family:Archivo,sans-serif !important; font-weight:800 !important; font-size:11px !important; letter-spacing:4px !important; text-transform:uppercase !important; } .oo-eyebrow::before{ content:""; display:inline-block; width:52px; height:2px; background:currentColor; vertical-align:middle; margin-right:12px; } /* display headings — add class "oo-display" */ .oo-display{ font-family:Anton, "Arial Narrow", Impact, sans-serif !important; text-transform:uppercase !important; line-height:.9 !important; letter-spacing:-.005em !important; font-weight:400 !important; } /* handwritten accent — add class "oo-hand" */ .oo-hand{ font-family:"Rocket Clouds", Yellowtail, cursive !important; line-height:1.15 !important; } /* buttons — hover goes black, never a brighter red */ .oo-btn-red:hover{ background:var(--oo-ink) !important; border-color:var(--oo-ink) !important; color:var(--oo-paper) !important; } .oo-btn-ghost{ background:transparent !important; border:2px solid currentColor !important; } .oo-btn-ghost:hover{ background:var(--oo-paper) !important; color:var(--oo-ink) !important; } /* hand-drawn circle around a price — wrap the price text in a container with class "oo-price" (red version) or "oo-price-light" (on black/red sections) */ .oo-price, .oo-price-light{ position:relative; display:inline-block; padding:.2em .6em; } .oo-price::after, .oo-price-light::after{ content:""; position:absolute; left:-14%; top:-24%; width:128%; height:150%; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%; } .oo-price::after{ background-image:url("PASTE_THE_RED_SVG_URL_HERE"); } .oo-price-light::after{ background-image:url("PASTE_THE_WHITE_SVG_URL_HERE"); } /* offset red frame behind an image — add class "oo-framed" to the image container */ .oo-framed{ position:relative; } .oo-framed::before{ content:""; position:absolute; inset:0; border:2px solid var(--oo-red); transform:translate(14px,14px); transition:transform .25s ease; z-index:0; } .oo-framed:hover::before{ transform:translate(6px,6px); } .oo-framed > *{ position:relative; z-index:1; } /* spinning seal — add class "oo-spin" to any image element */ .oo-spin{ animation:oo-rotate 22s linear infinite; } @keyframes oo-rotate{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .oo-spin{ animation:none; } .oo-framed::before{ transition:none; } }