/* ── RESET & ROOT ───────────────────────────────────────────── */
.rrs-wrap *, .rrs-wrap *::before, .rrs-wrap *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rrs-wrap {
–bg-base: #0b0b0d;
–bg-raised: #111114;
–bg-card: #16151a;
–bg-overlay: #1c1a20;
–ivory: #f3eadf;
–ivory-muted: #c9bfb3;
–gold: #d6b07a;
–ember: #ff9a3c;
–ember-dim: #c4701e;
–bronze: #6f4b2a;
–border: rgba(214,176,122,.18);
–glow-gold: rgba(214,176,122,.12);
–glow-ember: rgba(255,154,60,.15);
–ff-serif: ‘Cormorant Garamond’, ‘Playfair Display’, Georgia, serif;
–ff-sans: ‘Jost’, ‘Gill Sans’, ‘Trebuchet MS’, sans-serif;
–ff-script: ‘Dancing Script’, cursive;
font-family: var(–ff-sans);
background: var(–bg-base);
color: var(–ivory);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Google Fonts inline import */
@import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Jost:wght@300;400;500;600&family=Dancing+Script:wght@600&display=swap’);
/* ── UTILITY ────────────────────────────────────────────────── */
.rrs-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.rrs-label {
display: inline-block;
font-family: var(–ff-sans);
font-size: .7rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(–ember);
margin-bottom: 1.2rem;
}
.rrs-label::before {
content: ‘—— ‘;
opacity: .6;
}
.rrs-label::after {
content: ‘ ——’;
opacity: .6;
}
.rrs-heading {
font-family: var(–ff-serif);
font-weight: 600;
line-height: 1.08;
color: var(–ivory);
}
.rrs-divider {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(–gold), transparent);
margin: 1.8rem auto;
}
.rrs-btn {
display: inline-block;
padding: .85rem 2.4rem;
font-family: var(–ff-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(–gold);
color: var(–gold);
background: transparent;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color .35s, border-color .35s, box-shadow .35s;
}
.rrs-btn::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(–ember-dim), var(–bronze));
transform: translateX(-101%);
transition: transform .4s cubic-bezier(.77,0,.18,1);
z-index: 0;
}
.rrs-btn:hover::before { transform: translateX(0); }
.rrs-btn:hover {
color: var(–ivory);
border-color: var(–ember-dim);
box-shadow: 0 0 28px rgba(255,154,60,.25);
}
.rrs-btn span { position: relative; z-index: 1; }
.rrs-btn-ghost {
border-color: rgba(243,234,223,.25);
color: var(–ivory-muted);
}
.rrs-btn-ghost::before {
background: linear-gradient(135deg, rgba(243,234,223,.08), rgba(243,234,223,.04));
}
.rrs-btn-ghost:hover {
color: var(–ivory);
border-color: rgba(243,234,223,.5);
box-shadow: none;
}
/* ── NOISE TEXTURE OVERLAY ──────────────────────────────────── */
.rrs-noise {
position: relative;
}
.rrs-noise::after {
content: ”;
position: absolute;
inset: 0;
pointer-events: none;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23n)’ opacity=’1’/%3E%3C/svg%3E”);
opacity: .028;
mix-blend-mode: overlay;
z-index: 1;
}
/* ── EMBER GLOW BLOBS ───────────────────────────────────────── */
.rrs-glow-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
/* ── NAV ────────────────────────────────────────────────────── */
.rrs-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1.2rem 0;
transition: background .4s, padding .4s, backdrop-filter .4s;
}
.rrs-nav.rrs-nav–scrolled {
background: rgba(11,11,13,.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
padding: .8rem 0;
border-bottom: 1px solid var(–border);
}
.rrs-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.rrs-nav__logo {
font-family: var(–ff-serif);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .08em;
color: var(–ivory);
text-decoration: none;
line-height: 1;
}
.rrs-nav__logo em {
font-family: var(–ff-script);
font-style: normal;
color: var(–gold);
font-size: 1.35rem;
margin-left: .05em;
}
.rrs-nav__links {
display: flex;
gap: 2.4rem;
list-style: none;
}
.rrs-nav__links a {
font-size: .72rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(–ivory-muted);
text-decoration: none;
transition: color .25s;
}
.rrs-nav__links a:hover { color: var(–gold); }
.rrs-nav__cta {
font-size: .65rem;
padding: .6rem 1.6rem;
}
.rrs-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: .3rem;
}
.rrs-hamburger span {
display: block;
width: 24px;
height: 1.5px;
background: var(–ivory);
transition: .3s;
}
.rrs-mobile-menu {
display: none;
position: fixed;
inset: 0;
background: rgba(11,11,13,.97);
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
}
.rrs-mobile-menu.open { display: flex; }
.rrs-mobile-menu a {
font-family: var(–ff-serif);
font-size: 2rem;
font-weight: 600;
color: var(–ivory);
text-decoration: none;
letter-spacing: .05em;
transition: color .25s;
}
.rrs-mobile-menu a:hover { color: var(–gold); }
.rrs-mobile-close {
position: absolute;
top: 1.5rem;
right: 2rem;
background: none;
border: none;
color: var(–ivory-muted);
font-size: 1.8rem;
cursor: pointer;
line-height: 1;
}
/* ── HERO ───────────────────────────────────────────────────── */
.rrs-hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: var(–bg-base);
}
.rrs-hero__bg {
position: absolute;
inset: 0;
background:
url(‘your-hero-image.jpg’) center center / cover no-repeat,
radial-gradient(ellipse 80% 60% at 60% 80%, rgba(111,75,42,.55) 0%, transparent 65%),
radial-gradient(ellipse 50% 40% at 15% 20%, rgba(214,176,122,.07) 0%, transparent 60%),
linear-gradient(180deg, var(–bg-base) 0%, #0e0c10 50%, #0b0a0d 100%);
background-blend-mode: luminosity, normal, normal, normal;
opacity: .85;
z-index: 0;
}
.rrs-hero__ember-left {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,154,60,.22) 0%, transparent 70%);
bottom: -10%;
left: -8%;
animation: rrs-pulse 6s ease-in-out infinite;
}
.rrs-hero__ember-right {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(214,176,122,.1) 0%, transparent 70%);
top: 20%;
right: -5%;
animation: rrs-pulse 8s ease-in-out infinite reverse;
}
@keyframes rrs-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(1.15); }
}
.rrs-hero__content {
position: relative;
z-index: 2;
max-width: 820px;
padding: 10rem 0 8rem;
}
.rrs-hero__eyebrow {
font-size: .68rem;
font-weight: 600;
letter-spacing: .3em;
text-transform: uppercase;
color: var(–ember);
margin-bottom: 1.6rem;
opacity: 0;
animation: rrs-fadein .8s .2s forwards;
}
.rrs-hero__headline {
font-family: var(–ff-serif);
font-size: clamp(3.2rem, 7vw, 6.4rem);
font-weight: 700;
line-height: 1.02;
color: var(–ivory);
margin-bottom: 1.6rem;
opacity: 0;
animation: rrs-fadein .9s .4s forwards;
}
.rrs-hero__headline em {
font-style: italic;
color: var(–gold);
}
.rrs-hero__sub {
font-size: 1.05rem;
font-weight: 300;
color: var(–ivory-muted);
max-width: 520px;
margin-bottom: 3rem;
line-height: 1.75;
opacity: 0;
animation: rrs-fadein .9s .6s forwards;
}
.rrs-hero__actions {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
opacity: 0;
animation: rrs-fadein .9s .8s forwards;
}
.rrs-hero__scroll {
position: absolute;
bottom: 2.8rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
font-size: .6rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(–ivory-muted);
opacity: .5;
}
.rrs-hero__scroll-line {
width: 1px;
height: 50px;
background: linear-gradient(180deg, transparent, var(–gold));
animation: rrs-scrollline 2s ease-in-out infinite;
}
@keyframes rrs-scrollline {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes rrs-fadein {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── POSITIONING STRIP ──────────────────────────────────────── */
.rrs-strip {
background: var(–bg-raised);
border-top: 1px solid var(–border);
border-bottom: 1px solid var(–border);
padding: 5.5rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.rrs-strip__glow {
width: 700px;
height: 300px;
background: radial-gradient(ellipse, rgba(214,176,122,.07) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rrs-strip__statement {
font-family: var(–ff-serif);
font-size: clamp(1.6rem, 3.5vw, 2.9rem);
font-weight: 400;
font-style: italic;
color: var(–ivory);
max-width: 800px;
margin: 0 auto 1.6rem;
line-height: 1.3;
position: relative;
z-index: 2;
}
.rrs-strip__statement strong {
font-weight: 700;
font-style: normal;
color: var(–gold);
}
.rrs-strip__body {
font-size: .92rem;
color: var(–ivory-muted);
max-width: 560px;
margin: 0 auto;
line-height: 1.8;
position: relative;
z-index: 2;
}
/* ── SERVICES ───────────────────────────────────────────────── */
.rrs-services {
padding: 7rem 0;
background: var(–bg-base);
position: relative;
overflow: hidden;
}
.rrs-services__head {
text-align: center;
margin-bottom: 4.5rem;
}
.rrs-services__title {
font-size: clamp(2.2rem, 4vw, 3.6rem);
}
.rrs-services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.4rem;
}
.rrs-service-card {
background: var(–bg-card);
border: 1px solid var(–border);
padding: 2.8rem 2rem 2.4rem;
position: relative;
overflow: hidden;
cursor: default;
transition: border-color .35s, box-shadow .35s, transform .35s;
}
.rrs-service-card::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(214,176,122,.04) 0%, transparent 60%);
opacity: 0;
transition: opacity .35s;
}
.rrs-service-card:hover {
border-color: rgba(214,176,122,.4);
box-shadow: 0 0 40px rgba(214,176,122,.08), 0 12px 40px rgba(0,0,0,.4);
transform: translateY(-4px);
}
.rrs-service-card:hover::before { opacity: 1; }
.rrs-service-card__icon {
width: 44px;
height: 44px;
margin-bottom: 1.8rem;
opacity: .75;
transition: opacity .35s;
}
.rrs-service-card:hover .rrs-service-card__icon { opacity: 1; }
.rrs-service-card__icon svg {
width: 100%;
height: 100%;
stroke: var(–gold);
fill: none;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.rrs-service-card__num {
position: absolute;
top: 1.4rem;
right: 1.6rem;
font-family: var(–ff-serif);
font-size: 3rem;
font-weight: 700;
color: rgba(214,176,122,.06);
line-height: 1;
transition: color .35s;
}
.rrs-service-card:hover .rrs-service-card__num { color: rgba(214,176,122,.12); }
.rrs-service-card__title {
font-family: var(–ff-serif);
font-size: 1.35rem;
font-weight: 600;
color: var(–ivory);
margin-bottom: .8rem;
line-height: 1.2;
}
.rrs-service-card__body {
font-size: .85rem;
color: var(–ivory-muted);
line-height: 1.7;
}
.rrs-service-card__line {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
height: 1px;
background: var(–gold);
transition: right .4s cubic-bezier(.77,0,.18,1);
}
.rrs-service-card:hover .rrs-service-card__line { right: 0; }
/* ── WORK / PORTFOLIO ───────────────────────────────────────── */
.rrs-work {
padding: 7rem 0;
background: var(–bg-raised);
position: relative;
overflow: hidden;
}
.rrs-work__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 3.5rem;
gap: 2rem;
flex-wrap: wrap;
}
.rrs-work__title {
font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.rrs-work__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 1.4rem;
}
.rrs-work-card {
position: relative;
overflow: hidden;
background: var(–bg-overlay);
aspect-ratio: 16/10;
cursor: pointer;
}
.rrs-work-card:first-child {
grid-row: span 2;
aspect-ratio: unset;
}
.rrs-work-card__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .6s cubic-bezier(.25,.46,.45,.94);
filter: brightness(.55) saturate(.7);
}
.rrs-work-card:hover .rrs-work-card__img {
transform: scale(1.06);
filter: brightness(.7) saturate(.9);
}
.rrs-work-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(11,11,13,.85) 0%, transparent 55%);
z-index: 1;
}
.rrs-work-card__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem 1.8rem;
z-index: 2;
transform: translateY(6px);
transition: transform .35s;
}
.rrs-work-card:hover .rrs-work-card__content { transform: translateY(0); }
.rrs-work-card__tag {
font-size: .62rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(–ember);
margin-bottom: .5rem;
}
.rrs-work-card__name {
font-family: var(–ff-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(–ivory);
line-height: 1.1;
margin-bottom: .4rem;
}
.rrs-work-card__desc {
font-size: .8rem;
color: var(–ivory-muted);
opacity: 0;
transform: translateY(8px);
transition: opacity .35s .05s, transform .35s .05s;
}
.rrs-work-card:hover .rrs-work-card__desc {
opacity: 1;
transform: translateY(0);
}
/* placeholder backgrounds */
.rrs-work-card–01 .rrs-work-card__img {
background-image: url(‘project-01.jpg’);
background-color: #1a1218;
}
.rrs-work-card–02 .rrs-work-card__img {
background-image: url(‘project-02.jpg’);
background-color: #12151a;
}
.rrs-work-card–03 .rrs-work-card__img {
background-image: url(‘project-03.jpg’);
background-color: #151210;
}
.rrs-work-card–04 .rrs-work-card__img {
background-image: url(‘project-04.jpg’);
background-color: #141a14;
}
/* ── PROCESS ────────────────────────────────────────────────── */
.rrs-process {
padding: 7rem 0;
background: var(–bg-base);
position: relative;
overflow: hidden;
}
.rrs-process__head {
text-align: center;
margin-bottom: 5rem;
}
.rrs-process__title {
font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.rrs-process__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
gap: 0;
}
.rrs-process__steps::before {
content: ”;
position: absolute;
top: 2rem;
left: calc(16.6% + 2rem);
right: calc(16.6% + 2rem);
height: 1px;
background: linear-gradient(90deg, var(–border) 0%, var(–gold) 50%, var(–border) 100%);
z-index: 0;
}
.rrs-process-step {
text-align: center;
padding: 0 2.5rem;
position: relative;
z-index: 1;
}
.rrs-process-step__num {
width: 4rem;
height: 4rem;
border: 1px solid var(–border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-family: var(–ff-serif);
font-size: 1.1rem;
font-weight: 700;
color: var(–gold);
background: var(–bg-base);
box-shadow: 0 0 24px rgba(214,176,122,.1);
transition: border-color .35s, box-shadow .35s;
}
.rrs-process-step:hover .rrs-process-step__num {
border-color: var(–gold);
box-shadow: 0 0 40px rgba(214,176,122,.2);
}
.rrs-process-step__title {
font-family: var(–ff-serif);
font-size: 1.75rem;
font-weight: 700;
color: var(–ivory);
margin-bottom: .9rem;
letter-spacing: .02em;
}
.rrs-process-step__body {
font-size: .85rem;
color: var(–ivory-muted);
line-height: 1.75;
max-width: 260px;
margin: 0 auto;
}
/* ── TESTIMONIALS ───────────────────────────────────────────── */
.rrs-testimonials {
padding: 7rem 0;
background: var(–bg-raised);
position: relative;
overflow: hidden;
}
.rrs-testimonials__head {
text-align: center;
margin-bottom: 4rem;
}
.rrs-testimonials__title {
font-size: clamp(2rem, 3.5vw, 3rem);
}
.rrs-testimonials__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.rrs-testimonial-card {
background: var(–bg-card);
border: 1px solid var(–border);
padding: 3rem 2.4rem;
position: relative;
}
.rrs-testimonial-card__quote {
font-family: var(–ff-serif);
font-size: 3.5rem;
line-height: .8;
color: var(–gold);
margin-bottom: 1.2rem;
opacity: .5;
}
.rrs-testimonial-card__text {
font-family: var(–ff-serif);
font-size: 1.1rem;
font-weight: 400;
font-style: italic;
color: var(–ivory);
line-height: 1.7;
margin-bottom: 2rem;
}
.rrs-testimonial-card__author {
display: flex;
align-items: center;
gap: 1rem;
}
.rrs-testimonial-card__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(–bg-overlay);
border: 1px solid var(–border);
flex-shrink: 0;
overflow: hidden;
}
.rrs-testimonial-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rrs-testimonial-card__name {
font-size: .85rem;
font-weight: 600;
color: var(–ivory);
letter-spacing: .04em;
}
.rrs-testimonial-card__role {
font-size: .72rem;
color: var(–gold);
letter-spacing: .1em;
margin-top: .15rem;
}
/* trust stats bar */
.rrs-trust-bar {
margin-top: 5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(–border);
}
.rrs-trust-stat {
padding: 2.4rem 1.5rem;
text-align: center;
border-right: 1px solid var(–border);
position: relative;
}
.rrs-trust-stat:last-child { border-right: none; }
.rrs-trust-stat__num {
font-family: var(–ff-serif);
font-size: 2.6rem;
font-weight: 700;
color: var(–gold);
line-height: 1;
margin-bottom: .4rem;
}
.rrs-trust-stat__label {
font-size: .7rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(–ivory-muted);
}
/* ── FINAL CTA ──────────────────────────────────────────────── */
.rrs-cta {
padding: 10rem 0;
text-align: center;
background: var(–bg-base);
position: relative;
overflow: hidden;
}
.rrs-cta__glow-center {
width: 800px;
height: 600px;
background: radial-gradient(ellipse, rgba(111,75,42,.45) 0%, transparent 60%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rrs-cta__glow-bottom {
width: 400px;
height: 300px;
background: radial-gradient(ellipse, rgba(255,154,60,.15) 0%, transparent 70%);
bottom: -8%;
left: 50%;
transform: translateX(-50%);
}
.rrs-cta__content {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
}
.rrs-cta__title {
font-size: clamp(2.6rem, 5vw, 5rem);
margin-bottom: 1.4rem;
}
.rrs-cta__sub {
font-size: 1rem;
color: var(–ivory-muted);
margin-bottom: 3rem;
font-weight: 300;
line-height: 1.75;
}
.rrs-cta__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
flex-wrap: wrap;
}
/* ── FOOTER ─────────────────────────────────────────────────── */
.rrs-footer {
background: #080709;
border-top: 1px solid var(–border);
padding: 5rem 0 2.5rem;
}
.rrs-footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
.rrs-footer__brand-logo {
font-family: var(–ff-serif);
font-size: 1.3rem;
font-weight: 700;
color: var(–ivory);
margin-bottom: .8rem;
line-height: 1;
}
.rrs-footer__brand-logo em {
font-family: var(–ff-script);
font-style: normal;
color: var(–gold);
font-size: 1.5rem;
}
.rrs-footer__tagline {
font-size: .8rem;
color: var(–ivory-muted);
line-height: 1.7;
margin-bottom: 1.8rem;
max-width: 240px;
}
.rrs-footer__social {
display: flex;
gap: .75rem;
}
.rrs-footer__social a {
width: 36px;
height: 36px;
border: 1px solid var(–border);
display: flex;
align-items: center;
justify-content: center;
color: var(–ivory-muted);
text-decoration: none;
font-size: .75rem;
transition: border-color .25s, color .25s;
}
.rrs-footer__social a:hover {
border-color: var(–gold);
color: var(–gold);
}
.rrs-footer__col h4 {
font-family: var(–ff-sans);
font-size: .65rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 1.4rem;
}
.rrs-footer__col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: .75rem;
}
.rrs-footer__col ul a {
font-size: .82rem;
color: var(–ivory-muted);
text-decoration: none;
transition: color .25s;
}
.rrs-footer__col ul a:hover { color: var(–ivory); }
.rrs-footer__bottom {
border-top: 1px solid var(–border);
padding-top: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.rrs-footer__copy {
font-size: .72rem;
color: rgba(201,191,179,.35);
letter-spacing: .06em;
}
.rrs-footer__bottom-links {
display: flex;
gap: 1.8rem;
}
.rrs-footer__bottom-links a {
font-size: .72rem;
color: rgba(201,191,179,.35);
text-decoration: none;
transition: color .25s;
}
.rrs-footer__bottom-links a:hover { color: var(–ivory-muted); }
/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.rrs-reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity .7s ease, transform .7s ease;
}
.rrs-reveal.rrs-visible {
opacity: 1;
transform: translateY(0);
}
/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.rrs-services__grid {
grid-template-columns: repeat(2, 1fr);
}
.rrs-footer__top {
grid-template-columns: 1fr 1fr;
}
.rrs-trust-bar {
grid-template-columns: repeat(2, 1fr);
}
.rrs-trust-stat:nth-child(2) { border-right: none; }
.rrs-trust-stat:nth-child(3) { border-right: 1px solid var(–border); }
.rrs-trust-stat:nth-child(1),
.rrs-trust-stat:nth-child(2) {
border-bottom: 1px solid var(–border);
}
}
@media (max-width: 768px) {
.rrs-nav__links { display: none; }
.rrs-nav__cta { display: none; }
.rrs-hamburger { display: flex; }
.rrs-hero__content { padding: 9rem 0 6rem; }
.rrs-services__grid {
grid-template-columns: 1fr;
}
.rrs-work__grid {
grid-template-columns: 1fr;
}
.rrs-work-card:first-child {
grid-row: auto;
aspect-ratio: 16/10;
}
.rrs-work__head {
flex-direction: column;
align-items: flex-start;
}
.rrs-process__steps {
grid-template-columns: 1fr;
gap: 3rem;
}
.rrs-process__steps::before { display: none; }
.rrs-testimonials__grid {
grid-template-columns: 1fr;
}
.rrs-trust-bar {
grid-template-columns: repeat(2, 1fr);
}
.rrs-footer__top {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.rrs-footer__bottom {
flex-direction: column;
text-align: center;
}
.rrs-strip__statement {
text-align: center;
}
}
@media (max-width: 480px) {
.rrs-container { padding: 0 1.2rem; }
.rrs-trust-bar { grid-template-columns: 1fr; }
.rrs-trust-stat { border-right: none !important; border-bottom: 1px solid var(–border); }
.rrs-trust-stat:last-child { border-bottom: none; }
}
Revel Rebel Studios · Creative Agency
Ideas that bite.
Creative that
ignites.
We build brands that don’t just compete — they dominate.
Branding, web design, and creative direction for founders
who refuse to blend in.
Scroll
We don’t make content. We create impact.
Built different — just like the brands we build.
Revel Rebel Studios is a boutique creative agency specialising in brand identity, web design,
social content, and strategic direction. We work with ambitious founders and growing brands
who are ready to stop being invisible.
Built to stand out.
Not fit in.
Brand Identity
Logo systems, visual identity, typography, colour, and brand guidelines that make your business unmistakable — and impossible to copy.
Website Design
Cinematic, conversion-focused websites that work as hard as you do. Built premium. Designed to sell. Not another template.
Social Content
Content strategy, post design, and copy that stops the scroll — and starts conversations. Consistent. On-brand. Built to grow.
Creative Strategy
Positioning, messaging, and brand architecture that give your business a direction — not just a look. Where creativity meets intention.
The proof is in
the portfolio.
Brand Identity · Strategy
Blackhaven Films
Complete visual identity and brand system for an independent film production house.
Web Design · Digital
Nova Horizon
Conversion-focused website redesign for a tech consultancy scaling fast.
Social Content · Brand
Dynasty Drips
Premium content direction and social identity for a luxury streetwear drop.
Strategy · Brand Identity
Finch Media
Full brand overhaul and positioning strategy for a boutique media company.
Three steps.
One outcome: unforgettable.
Discover
We go deep on who you are, who you’re after, and what makes you impossible to ignore. No guesswork — just clarity.
Create
We build the brand: identity, messaging, design, and digital presence — crafted to command attention and hold it.
Ignite
We launch you into the world fully built — equipped to grow, scale, and dominate your space. This is where it gets good.
Don’t take our word for it.
Working with Revel Rebel was the single best investment I made in my brand. They didn’t just design a logo — they built a whole identity I’m proud to stand behind. The response from clients has been immediate and dramatic.
–>
Marcus Webb
Founder, Blackhaven Films
I came to them with a brand that was invisible. Six weeks later we had a premium identity, a site that actually converts, and a social presence that finally looks the part. They think like strategists and build like artists.
–>
Simone Araya
CEO, Nova Horizon
Your brand
deserves better
than average.
Let’s build something that refuses to be ignored.
One conversation. Zero fluff. All fire.
(function () {
// Nav scroll behaviour
var nav = document.getElementById(‘rrs-nav’);
window.addEventListener(‘scroll’, function () {
if (window.scrollY > 60) {
nav.classList.add(‘rrs-nav–scrolled’);
} else {
nav.classList.remove(‘rrs-nav–scrolled’);
}
}, { passive: true });
// Mobile menu
var ham = document.getElementById(‘rrs-ham’);
var menu = document.getElementById(‘rrs-mobile-menu’);
var cls = document.getElementById(‘rrs-close’);
function openMenu() { menu.classList.add(‘open’); document.body.style.overflow = ‘hidden’; }
function closeMenu() { menu.classList.remove(‘open’); document.body.style.overflow = ”; }
if (ham) ham.addEventListener(‘click’, openMenu);
if (cls) cls.addEventListener(‘click’, closeMenu);
document.querySelectorAll(‘.rrs-mobile-link’).forEach(function (a) {
a.addEventListener(‘click’, closeMenu);
});
// Scroll reveal
var reveals = document.querySelectorAll(‘.rrs-reveal’);
if (‘IntersectionObserver’ in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add(‘rrs-visible’);
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
reveals.forEach(function (el) { io.observe(el); });
} else {
// Fallback for older browsers
reveals.forEach(function (el) { el.classList.add(‘rrs-visible’); });
}
})();
<!–
═══════════════════════════════════════════════════════════════
HOW TO USE IN WORDPRESS
═══════════════════════════════════════════════════════════════
STEP 1 — Create or open the page
• In your WordPress admin, go to Pages → Add New (or open an existing blank page).
• Give it a title (e.g., "Home") — this title will NOT appear on the page itself.
STEP 2 — Set the page template to "Full Width" or "Blank"
• In the right-hand panel under "Template", choose whichever option removes the
theme's header, footer, and sidebar so the page is completely blank.
• If your theme has no such template, contact your theme developer or use a plugin
like "Page Builder Sandwich" or "Full Width Templates".
STEP 3 — Paste the code
• Switch the editor to "Code Editor" mode (top-right ⋮ menu → Code Editor),
OR add a "Custom HTML" block and paste the entire code into it.
• Make sure you paste ALL the code — from through to the closing tag.
STEP 4 — Replace placeholder images
• Search for these strings inside the code and replace with your real image URLs:
your-hero-image.jpg → Full URL to your hero background image
project-01.jpg → Full URL to portfolio image 1
project-02.jpg → Full URL to portfolio image 2
project-03.jpg → Full URL to portfolio image 3
project-04.jpg → Full URL to portfolio image 4
• Upload your images via Media → Add New, then copy each image’s full URL.
STEP 5 — Update links and contact info
• Replace hello@revelrebelstudios.com with your real email address.
• Replace # placeholder hrefs in the nav and footer with your real page URLs.
• Update the social media links (IG, FB, LI, BE) to your real profiles.
STEP 6 — Publish and preview
• Hit Publish (or Update), then View Page.
• Check on mobile, tablet, and desktop.
• Adjust copy, colours, or spacing directly inside the tag if needed.
TIPS
• All colours are stored as CSS variables at the top of the block —
easy to tweak without hunting through the whole file.
• All class names are prefixed “rrs-” to avoid conflicts with your theme’s CSS.
• The Google Fonts import is inside the tag — no plugin needed.
• If fonts aren’t loading, your WordPress theme may block @import in HTML blocks.
In that case, add the Google Fonts link manually in Appearance → Customize →
Additional CSS or via your theme’s header settings.
═══════════════════════════════════════════════════════════════
–>
Site Title 